如何从FullCalendar中删除此事件？

The calendar lets the user drag a timeslot onto the calendar, however I would like them to be able to remove it if they click on it.

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

So in the eventClick I have this function:

所以在eventClick我有这个功能：

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

It just passes in the calendar event and the calendar itself.

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

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

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

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

I've also tried using a filter, but a breakpoint on the return statement is never hit.

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

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

Any ideas? (I know the Id is right, and the last line works). Firebug doesn't show any errors in the javascript.

有任何想法吗？（我知道Id是对的，最后一行有效）。 Firebug在javascript中没有显示任何错误。

I'm using FullCalendar v1.4.10

我正在使用FullCalendar v1.4.10

6 个解决方案

#1

Instead of using your passed in cal, can you try using a call to the div that holds your calendar?

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

In the case of eventClick, this refers to the HTML for the event according to what I'm reading in the docs.

在eventClick的情况下，根据我在文档中阅读的内容，这指的是事件的HTML。

#2

When you have all your id's in place use Tuan's solution.

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

But when you do NOT have id's in your event do it like this (this work also when you have id's set):

但是当你在你的事件中没有id时，就像这样（当你设置了id时这项工作）：

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

Why this problem appear? The common reason for that is fullcalendar doesn't add id automatically when you're adding new event. If so, id which you have passed is undefined. Fullcalendar uses id in both cases when you're trying delete using id or filter. So when it's value is undefined it always return false. Meaning list of elements to delete is always empty.

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

#3

Even simpler:

更简单：

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

#4

Use refetchEvents:

使用refetchEvents：

cal.fullCalendar("refetchEvents");

#5

Justkt's answer took me a second to wrap my head around, but I'll post my results for any other noobs who need to see the code in a really simple way:

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");                
        }
      });   
}

The PHP (using codeignighter):

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
}

#6

I use filter function with event.start and it works well

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

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

#1