Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery FullCalendar not rendering

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?

like image 508
ksumarine Avatar asked Apr 26 '12 19:04

ksumarine


1 Answers

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!

like image 81
ganeshk Avatar answered Sep 18 '22 08:09

ganeshk