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 fun

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

Use refetchEvents:

cal.fullCalendar("refetchEvents");

Answer 3

Even simpler:

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

Answer 4

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 5

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