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

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

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

Answer 2

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 3

Even simpler:

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

Answer 4

Use refetchEvents:

cal.fullCalendar("refetchEvents");

Answer 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:

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):

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

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

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