rerendering events in fullCalendar after Ajax database update

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 )

You can render events in 3 steps..

1) remove all events

.fullCalendar( 'removeEvents');

2) add event sourse

.fullCalendar( 'addEventSource', events);         

3) render events

.fullCalendar( 'rerenderEvents' );

Like...

$.ajax({    type: "POST",    url: "eventEditXHR.php",    data: {       //the data    },    success: function(events)      {              $('#calendar').fullCalendar('removeEvents');              $('#calendar').fullCalendar('addEventSource', events);                       $('#calendar').fullCalendar('rerenderEvents' );       }.     });

For FullCalendar v3.8.0 the following will work:

var events = [    {title: 'Business Lunch', start: '2017-12-03T13:00:00'},    {title: 'Meeting', start: '2017-12-13T11:00:00'},    {title: 'Conference', start: '2017-12-18', end: '2017-12-20'},];$('#calendar').fullCalendar({    defaultDate: '2017-12-12',    events: function (start, end, tz, callback) {        callback(events);    }});events.push({title: 'Party', start: '2017-12-29T20:00:00'});$('#calendar').fullCalendar('refetchEvents');

jsbin