如何從FullCalendar中刪除此事件？

Question

日歷允許用戶將時間段拖到日歷上，但我希望他們能夠在點擊它時將其刪除。

所以在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

Answer 1

當你擁有所有你的id時，使用Tuan的解決方案。

但是當你在你的事件中沒有id時，就像這樣（當你設置了id時這項工作也是如此）：

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

為什么會出現此問題？ 常見的原因是fullcalendar在添加新事件時不會自動添加id。 如果是這樣，您傳遞的ID是未定義的。 當您嘗試使用id或filter進行刪除時，Fullcalendar在兩種情況下都使用id。 因此，當它的值未定義時，它總是返回false。 要刪除的元素的含義列表始終為空。

Answer 2

更簡單：

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

Answer 3

您可以嘗試使用保存日歷的div調用而不是使用傳入的cal嗎？

在eventClick的情況下，根據我在文檔中閱讀的內容 ， this指的是事件的HTML。

Answer 4

使用refetchEvents：

cal.fullCalendar("refetchEvents");

Answer 5

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
}

Answer 6

我在event.start中使用了filter函數，效果很好

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