Question

For some reason, I cannot get the calendar to rerender after a POST. All goes well up to that point:

$('#calendar').fullCalendar({
    ...
    select: function (startDate, endDate) {
        $.ajax({
            url: 'data.php',
            type: "POST",
            data: {
                'start':startDate,
                'end':endDate,
                }
            success: $('#calendar').fullCalendar('rerenderEvents')
            }
     ...
    });

The data posts successfully, my php script adds the new event to the database just fine. The only problem is that the calendar is not being rerendered with the new data in the database.

If I refresh the page (F5 in Firefox) the new event is rendered. Obviously, I need the event to show up as soon as it has been committed to the database. I can’t expect my user to refresh the page.

I have done many permutations of this success statment, eg:

function () {
    $('#calendar').fullCalendar('rerenderEvents');
}

and (with my php returning ‘success’),

function (data) {
    if (data === 'success') $('#calendar').fullCalendar('renderEvents');
}

However, no matter what, the new event added to the database only shows up if I refresh the screen. Can anyone suggest what I might be doing wrong?

Answer 1

Try:

$('#calendar').fullCalendar("refetchEvents");

---

Update 2013-01-31.

That works because you are forcing FC to reread the event source and render the calendar again.

However, if that is sometimes a brute force solution, another way to achieve the same (when possible) is to do this, say in dayClick when creating a new event:

• update event-DB using $.ajax
• create the corresponding new event:
  yourcal.fullCalendar('renderEvent', {id:x,start:timest,end:timend,title:txt}, true);