rerendering events in fullCalendar after Ajax database update
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' );
}.
});
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 )
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