rerendering events in fullCalendar after Ajax database update

Guy picture Guy · Jan 18, 2014 · Viewed 84.1k times · Source

I am trying to have fullCalendar reflect changes made to a database via AJAX. The problem is that it won't update the calendar on screen after a successful AJAX call.

$.ajax({
    type: "POST",
    url: "eventEditXHR.php",
    data: {
       //the data
    },
    success: function(text) {
      $("#calendar").fullCalendar("refetchEvents");
    }....

I'm I using the wrong method? What would be the best way to accomplish this without having to reload the whole page? Thanks for any input!

Answer

Igor S. picture Igor S. · Jan 21, 2014

There are several ways. Some less elegant.

1. If you are using FullCalendar to grab json events:

$('#calendar').fullCalendar({ events: "json-events.php",    });

Just do:

$('#calendar').fullCalendar( 'refetchEvents' );

If you want outside method to fetch events you could do. Not elegant but will work

$('#calendar').fullCalendar( 'removeEventSource', source )
$('#calendar').fullCalendar( 'addEventSource', source )