fullcalendar不会在未选择的jqxtab中呈现

Question

如果"selectedItem"选项卡不是包含完整日历的选项卡，那么完整日历将不会在jqxtab中呈现。假设日历在选项卡0上，而我的selectedItem设置为选项卡1。第二个选项卡在页面加载时被选中，正如您所期望的那样。如果我单击第一个选项卡（包含完整日历），则只显示完整日历的"Today<>"标题按钮。如果我点击其中一个按钮，那么完整日历的其余部分就会呈现出来。

如果在页面加载中选择了选项卡0，则会如您所期望的那样立即绘制完整日历。

以下代码：

$(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>

因此，我找到了一个修复方法，即在单击选项卡时调用渲染函数，但如果在jqxtabs中启用了淡入淡出，则该函数不起作用，这很糟糕。

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

Answer 1

Fullcalendar只能在可见的情况下进行渲染。您找到的修复程序不适用于淡入淡出，因为当tabclick事件触发时，它不可见。

简单的解决方法是使用超时。它甚至看起来没有实际延迟（只是在其他代码完成后运行）：

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