rerendering events in fullCalendar after Ajax database update

Question

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!

Answer 1

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 )

Answer 2

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' );
       }.
     });

Answer 3

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');
 }

Answer 4

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?

Answer 5

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

Answer 6

One line does the work:

$('#calendar').fullCalendar('refetchEventSources', 'eventEditXHR.php')

Late reply, but this should be the most efficient way since 2.8.0