fullcalendar 不在未选择的 jqxtab 中呈现答案

【问题标题】：fullcalendar does not render in an unselected jqxtabfullcalendar 不在未选择的 jqxtab 中呈现
【发布时间】：2015-02-07 00:29:48
【问题描述】：

如果“selectedItem”选项卡不是包含完整日历的选项卡，我遇到了完整日历无法在 jqxtab 中呈现的问题。因此，假设日历位于选项卡 0 上，而我的 selectedItem 设置为选项卡 1。正如您所期望的那样，在页面加载时选择了第二个选项卡。如果我然后单击第一个选项卡（包含完整日历），则显示的唯一内容是完整日历的“今天 ”标题按钮。如果我单击其中一个按钮，则将呈现完整日历的其余部分。

如果在页面加载时选择了选项卡 0，则 fullcalendar 会立即按您的预期绘制。

代码如下：

$(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');
});

【问题讨论】：

标签： fullcalendar jqxwidgets

【解决方案1】：

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

简单的解决方法是使用超时。它甚至似乎在没有实际延迟的情况下工作（只是在其他代码完成后运行）：

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

【讨论】：