JQuery not generating the calendar content as the container is hide
<p>I have a calendar control and inside tabs, but when i click the tab header it opens the container but the Jquery Calendar inside it doesn't work?</p>

<p>suspecting its because the container is display:none initially.</p>

<p>Now, i am initializing the calendar on click of my tab header like below,</p>

<pre><code>$(".nav-tabs li:nth-child(6)").on("click", function () {
$("#dcr-ordering-calendar").show();
/* initialize the calendar*/
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

$('#dcr-ordering-calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    editable: true,
    droppable: true, // this allows things to be dropped onto the calendar
    drop: function () {
        // is the "remove after drop" checkbox checked?
        if ($('#drop-remove').is(':checked')) {
            // if so, remove the element from the "Draggable Events" list
            $(this).remove();
        }
    },
    events: [
        {
            title: 'All Day Event',
            start: new Date(y, m, 6),
            color: '#a22a92'
        },
        {
            title: 'Long Event',
            start: new Date(y, m, 8),
            end: new Date(y, m, 10),
            color: '#1aa6b3'
        },
        {
            id: 999,
            title: 'Repeating Event',
            start: new Date(y, m, d - 3, 16, 0),
            allDay: false,
            color: '#1aa6b3'
        },
        {
            id: 999,
            title: 'Repeating Event',
            start: new Date(y, m, d + 4, 16, 0),
            allDay: false,
            color: '#1aa6b3'
        },
        {
            title: 'Meeting',
            start: new Date(y, m, d, 10, 30),
            allDay: false,
            color: '#85ad20'
        },
        {
            title: 'Lunch',
            start: new Date(y, m, d, 12, 0),
            end: new Date(y, m, d, 14, 0),
            allDay: false,
            color: '#85ad20'
        },
        {
            title: 'Birthday Party',
            start: new Date(y, m, d + 1, 19, 0),
            end: new Date(y, m, d + 1, 22, 30),
            allDay: false,
            color: '#85ad20'
        }
    ]
});
</code></pre>

<p>});</p>

<p>how to fix it?</p>