re-draw fullCalendar on the fly

Question

I want the fullCalendar to redraw itself (all the structure and events) without reloading the page.

Scenario: I am using a patch of fullCalendar that supports the Resource View. For a few user actions I want to change the resources. But I don't want to reload the page.

Answer 1

You could 'destroy' and 'render' the calendar as a whole. But that might be cumbersome - especially in older browsers.

$('#calendar').fullCalendar('destroy');
$('#calendar').fullCalendar('render');

If you don't actually need to render the table, but just rerender the events again, you could use the 'rerenderEvents' method:

$('#calendar').fullCalendar('rerenderEvents');

Hopefully this helps!

Answer 2

Use refetchResources: .fullCalendar( 'refetchResources' )

This will fetch and freshly re-render the resource data, per the FullCalendar documentation.

Answer 3

The problem:

"...The problem is that the calendar is initialized while the modal or div is not visible... " based on this link enter link description here

In my opinion, destroy is not needed in this case, only with render you can see the calendar.

My solution:

<script type="text/javascript">
    $('#objectname').show(0,onObjectShow);
    function onObjectShow(){$('#calendar').fullCalendar('render');}
</script>

You must to be sure that the object(container of calendar) is fully visible. For example, my first mistake was to put this code on "onClick" event, and click event is triggered before show the object container and has no effect.

Solution Based on this reference.