如何从FullCalendar中删除此事件?

时间:2011-01-10 17:04:41

标签: javascript jquery fullcalendar

日历允许用户将时间段拖到日历上,但我希望他们能够在点击它时将其删除。

所以在eventClick中我有这个功能:

function (calEvent) {
  removeRequestedEvent($(this), calEvent);
},

它只传递日历事件和日历本身。

removeRequestedBooking: function (cal, calEvent) {
    if (!confirm("Delete?"))
        return;

    cal.fullCalendar("removeEvents", calEvent.id);
    cal.fullCalendar("rerenderEvents");

    // Re-show draggable element
    $("#requests #" + calEvent.id).show();
}

我也尝试过使用过滤器,但是返回语句中的断点永远不会被命中。

    cal.fullCalendar("removeEvents", function (event) {
        return event.id == calEvent.Id;
    });

有什么想法吗? (我知道Id是对的,最后一行有效)。 Firebug在javascript中没有显示任何错误。

我正在使用FullCalendar v1.4.10

6 个答案:

答案 0 :(得分:27)

当你拥有所有身份证时,请使用Tuan的解决方案。

但是当你在你的活动中没有id时,就像这样(当你设置id时也可以这样做):

eventClick: function(event){
   $('#myCalendar').fullCalendar('removeEvents',event._id);
}

为什么会出现此问题? 常见的原因是fullcalendar在添加新事件时不会自动添加id。如果是这样,您传递的ID是未定义的。当您尝试使用id或filter进行删除时,Fullcalendar在两种情况下都使用id。因此,当它的值未定义时,它总是返回false。要删除的元素的含义列表始终为空。

答案 1 :(得分:8)

更简单:

eventClick: function(calEvent, jsEvent, view) {
    $('#calendar').fullCalendar('removeEvents', function (event) {
        return event == calEvent;
    });
}

答案 2 :(得分:4)

您可以尝试使用保存日历的div调用而不是使用传入的cal吗?

对于eventClickthis根据我在文档中阅读的内容引用事件的HTML。

答案 3 :(得分:4)

使用refetchEvents:

cal.fullCalendar("refetchEvents");

答案 4 :(得分:3)

Justkt的回答让我花了一秒钟的时间来解决这个问题,但我会将结果发布给任何其他需要以非常简单的方式查看代码的新手:

eventClick: function(event){
  var event_id = event.id;
  $.post('/Dropbox/finance/index.php/welcome/update', {"event_id": event_id},
      function(data){
          $('#calendar').fullCalendar("removeEvents",  (data));
          $('#calendar').fullCalendar("rerenderEvents");                
        }
      });   
}

PHP(使用codeignighter):

public function update(){
  $result = $this->input->post('event_id');
  echo $result;
  // would send result to the model for removal from DB, or whatever
}

答案 5 :(得分:2)

我在event.start中使用过滤功能,效果很好

calendar.fullCalendar('removeEvents', function(event) {
  return 
    $.fullCalendar.formatDate(event.start, 'yyyyMMdd') 
    == $.fullCalendar.formatDate(start, 'yyyyMMdd');
});