How do I properly load the jQuery fullcalendar plugin in a hidden div

Question

I'm using the jQuery tools tabs to divide my page into tabs. One of those tabs contain a jQuery Fullcalendar. Because I load JavaScript last in the page for speed and to avoid flash of unstyled content, I hide the initially unseen tabs using display:none. When doing this, the fullcalendar doesn't render properly. It shows the proper buttons, but until I press the today-button, no calendar is shown. If I allow it to render into a visible div, it displays properly.

I can work around this using the tab-select events to render the calendar or by moving the calendar and tab scripts to the head, but I'd rather if there was a more proper solution.

Answer 1

When the div is hidden, fullCalendar doesn't know what size it should render itself, so you just need to call the render function after you know that the div is visible.

Attach it to the show event or whatever:

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

Answer 2

What you need to do is load the data after the link is clicked, not entirely sure but i think the issue is that the height is not set correctly after the data is loaded so it only shows the top part.

What i have done and worked for me.

$(document).ready(function() {
    $("#calendareventlink").click ( function(){
      loadCalendar();
    });
});
function loadCalendar(){
  //Do your data loading here
}

<a href="" id="calendareventlink">View Calendar</a>