JQuery Full Calendar inside div tag not showing until calendar click event is triggered

Question

I have a page that displays different sections Iimages, calendar, info, etc) inside div tags. The div tags get hidden and shown depending on what nav link is clicked on the left side of the page. When I enter the page, the calendar div is hidden then I click on the calendar link to show the calendar and the page comes up but the calendar isn't there, the calendar buttons are visible but no calendar. Once I click on a calendar button, the calendar appears. Posted images below. Do I need to refresh the page/resize or something when the calendar div tag gets selected and hides all other divs and shows the calendar div?

The first pic here is when I first enter the page, the second is after I click the month button.

Here is the div that contains the calendar code

<div id="eventcalendar">
    <div id='calendar' style="width:65%"></div>
</div>

Here is the code that hides/shows the calendar div when the nav link is clicked.

$("#calendarlink").click(function() {
    $("#eventcalendar").show();
    $("#images").hide();
    $("#listing").hide();
    $("#overview").hide();
    $("#details").hide();
    $("#address").hide();
    $("#map").hide();
    $('#calendar').fullCalendar('refresh'); //these don't show calendar
    $('#calendar').fullCalendar('rerenderEvents'); //these don't show calendar
});

Here is the code that renders the calendar (it's inside $(document).ready(function () {})

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    defaultView: 'agendaDay',
    editable: true,
    allDaySlot: false,
    selectable: true,
    slotMinutes: 15
});

Note: If I show the calendar when the page first gets opened then the calendar shows. Shown here.

$(document).ready(function () {
$("#overview").show();
$("#details").hide();
$("#listing").hide();
$("#address").hide();
$("#map").hide();
$("#images").hide();
$("#eventcalendar").show();

Answer 1

Rearrange your functions so that the calender is activated on non hidden div, then hide it.

Some elements like calender doesn't like to be activated on hidden divs... better activate them on normal divs then hide them ;)