rerendering events in fullCalendar after Ajax database update
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!
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');
This is what works in ASP.NET CORE, MVC 6 :
success: function(events)
{
$('#calendar').fullCalendar('rerenderEvents');
$('#calendar').fullCalendar('refetchEvents');
}
while this was working in ASP.NET MVC 5:
success: function(events)
{
$('#calendar').fullCalendar('refetchEvents');
}
What works for me:
success: function(text) {
setTimeout(function(){
$("#calendar").fullCalendar("rerenderEvents");
},50);
}
If I do it directly without timeout it does not work, probable due to the $element.fullCalendar variable not yet set completely?
One line does the work:
$('#calendar').fullCalendar('refetchEventSources', 'eventEditXHR.php')
Late reply, but this should be the most efficient way since 2.8.0
eventDrop: function (event, delta, revertFunc) {
var id = event.id;
var start = event.start.format();
$.ajax({
url: getURLRoot() + 'Diary/UpdateEventTimestamp',
type: "POST",
data: { id: id, start: start },
success: function () {
$('#calendar').fullCalendar('refetchEvents');
}
});
}
If you call the refetchevents in the ajax success function it will not work as it is async i believe. But what you can do is call the refetchevents in the ajax complete function.
$.ajax({
type: "POST",
url: "/TaxCalendar/CreateEvent",
data: JSON.stringify({ jdata: json }),
//data: jdata,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (events) {
}, complete: function () {
//Call Refetch function here.
$('#calendar').fullCalendar('refetchEvents');
}
});
