Question

I have fullcalendar placed inside a tab based on the jqwidgets.

When I click on the selected tab, the top row of buttons shows up but not the calendar itself. The calendar does show once you click on one of the top row buttons.

I have read the other posts here on how to do this with the standard ui.tabs component, and tried it, but it doesn’t work. Here’s what I have:

<script type="text/javascript">
    jQuery(document).ready(function () {
        var theme = '';
        // Create jqxTabs.
        jQuery('#classInfo').jqxTabs({ 
            width: "100%", 
            height: "1000px", 
            autoHeight: false, 
            position: 'top', 
            theme: theme, 
            show: function(event, ui) {
                jQuery('#classcalendar').fullCalendar('render');
                }
        });
        jQuery('#settings div').css('margin-top', '10px');
    });
</script>

Thanks

Answer 1

By default FullCalendar doesn’t render inside hidden elements. And the show event binder doesn’t apply to jqxTabs. It only applies to jQuery UI tabs.

Try the selected event binder instead:

$('#classInfo').bind('selected', function (event) { 
  if(event.args.item=="3") {
    jQuery('#classcalendar').fullCalendar('render');
  }
});

Here 3 is the index of the tab which holds the calendar. You can put any condition which applies to your case here.