FullCalendar in jQuery tabs no loading initially via ajax

Question

I am using my own custom function to populate events:

$('#calendar').fullCalendar({
  events:getCalendarData
});

And I happen to have the calendar as one of my tabs using the jQuery tabs plugin (tabs get created by $('#tabs').tabs();).

The set-up works, except that I find that when I initially load the page, the calendar does make the async request (I see it in Firebug), but if I switch to the tab on which the calendar is displayed, it will be blank (the interface is fine, but no events). If I move to the next month and back again, it will show the data fine. Also, if I make the calendar on the FIRST tab then it works fine! So it seems like just the initial request is not rendering events, perhaps because the tab is hidden at the time that it is loaded.

If I load the page, go to the calendar tab (showing no events), and I happen to manually call

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

then it will load the events. I've tried putting that render call AFTER the call to the fullCalendar callback, but no dice.

callback(events);
$('#calendar').fullCalendar( 'render' );

It seems like one option might be to bind

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

up to the show event of the tab, but then that's a tad messy.

Any advice?

-Brian

Answer 1

you should put the render call in the show event of the tab. that is what it suggests here: http://arshaw.com/fullcalendar/docs/display/render/