FullCalendar, events are not refreshed

Question

Here is my jquery code :

<script type="text/javascript">
$('#refresh').on('click', function(){
    var json_events;
    $.ajax({
        url: 'ajaxRefresh.php',
        type: 'POST',
        data: 'type=fetch',
        success: function(response){
            json_events = response;
            console.log(response);
        }
    });
    $('#calendar').fullCalendar({
        events: json_events
    });
})
</script>

All is OK in fact, except thaat the calendar is not updated when I click on the button.

I did a console.log in order to see if my JSON returned by ajax was OK. And I got :

[{"id":"10","title":"Rugby","start":"2017-05-16T00:01:00+05:30","end":"2017-05-19T00:01:00+05:30","allDay":false}]

Thanks in advance for your precious help.

PS : I included 'fr.js' because I need my calendar to be in french.

Answer 1

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.