fullcalendar does not render in an unselected jqxtab

Question

I'm having a problem where fullcalendar will not render in a jqxtab if the "selectedItem" tab is not the tab that contains the fullcalendar. So lets say the calendar is on tab 0 and my selectedItem is set to tab 1. The Second tab is selected when the page loads, as you'd expect. If I then click on the first tab (containing fullcalendar), the only things that are displayed are the "Today < >" Header buttons for fullcalendar. If I click on one of these buttons, THEN the rest of fullcalendar renders.

If tab 0 is selected on the page load, fullcalendar draws right away as you'd expect.

Code below:

$(document).ready(function () {
        //Creating jqxTabs

        $('#jqxTabs').jqxTabs({ selectedItem: 1, width: '100%' });
        $('#calendar').fullCalendar({
            // put your options and callbacks here
        })


});

<div id='jqxTabs'>
<ul>
            <li>Tab 1</li>
            <li>Tab 2</li>
</ul>
<div style="width: 100%; height: 100%; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px;"><div id='calendar'></div></div>
<div style="width: 100%; height: 100%; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px;">Tab 2</div>

</div>

So I found a fix which is to call the render function when the tab is clicked, however it does not work if fade is enabled in the jqxtabs, which sucks.

$('#jqxTabs').on('selected', function (event) { 
    $('#calendar').fullCalendar('render');
});

Answer 1

Fullcalendar can only render if it's visible. The fix you found doesn't work with fade because it isn't visible when the tabclick event fires.

Easy fix is to use a timeout. It even seems to work with no actual delay (just runs after other code finishes):

$('#jqxTabs').on('tabclick', function (event) {
    window.setTimeout(
        function(){
            $('#fc2').fullCalendar('render');
        });
});