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

I know this question is ancient, but it came out first while I was searching for the solution for the same problem. For some reason the proposed solution with render doesn't work in some specific cases (if the inactive tab is loaded with calendar entries), so I had to refetchEvents.

The code is as follows:

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

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>

When you click on the tab call something like this:

$('#calendar').fullCalendar('render'); // Force the calendar to render

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');