FullCalendar, events are not refreshed

ajax, fullcalendar, jquery, json

Solution

You've got your approach the wrong way round really. This should work better:

$('#calendar').fullCalendar({
    events: function( start, end, timezone, callback ) { 
      $.ajax({
        url: 'ajaxRefresh.php',
        type: 'POST',
        data: 'type=fetch',
        success: function(response){
            console.log(response);
            callback(response); //sends the events to fullCalendar
        }
      });
    }
});

$('#refresh').on('click', function(){
  $("#calendar").refetchEvents();
});

This defines an event source for the calendar using the built-in architecture of fullCalendar. It will automatically re-runs this whenever the calendar view and/or date range is changed. Note though that really your PHP should be accepted the "start" and "end" parameters and only returning data for the dates that are currently being displayed on the calendar. That way you don't download more data than you actually need, which will improve performance, especially if you app runs for many years and collects lots of data, most of which users won't view any more after a certain point.

And then, when you click "refresh", it runs the "refetchEvents" method manually, which just causes that same function you supplied to the "events" parameter again as an extra call.

See https://fullcalendar.io/docs/event_data/events_function/ and https://fullcalendar.io/docs/event_data/refetchEvents/ for more details.

It might also be worth looking at https://fullcalendar.io/docs/event_data/events_json_feed/ - if you can make your PHP page comply with the structure required by this, you can simplify things and remove the "ajax" call entirely from the client-side code, and just write `events: "ajaxRefresh.php" as the events property in fullCalendar.

Problem

Original source