jQuery FullCalendar not rendering

ksumarine picture ksumarine · Apr 26, 2012 · Viewed 14.6k times · Source

I have a working fullcalendar on my site, however, the actual calendar table doesn't show until you change the month/year or select "today".

If I look at the rendered source, I see that the div around the table is empty until I press a button.

<div style="position: absolute; -moz-user-select: none;" class="fc-view fc-view-month fc-grid" unselectable="on"></div>

Does anyone have a clue why this is happening?

Answer

ganeshk picture ganeshk · Apr 27, 2012

Do you have this calendar in a tab or a dialog, which is hidden from view at first?

If so, you need to explicitly render the fullCalendar when that control is active.

Let's say you are using the jQuery UI Tabs widget and have the FullCalendar in the 2nd tab (which is hidden from view till the 2nd tab is selected). In this case, you could do something like this:

$('#tabs').tabs({
    show: function(event, ui) {
        $('#calendar').fullCalendar('render');
    }
});

This makes sure that the calendar is rendered when the tab is shown. Hope this helps!