How do I delete this event from FullCalendar?

Question

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:

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.

I'm using FullCalendar v1.4.10

Answer 1

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

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

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.

Answer 2

Even simpler:

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