fullcalendar不会在未选择的jqxtab中呈现
如果“selectedItem”选项卡不是包含fullcalendar的选项卡,则fullcalendar将不会在jqxtab中呈现。假设日历在选项卡0上,我的selectedItem设置为选项卡1。第二个选项卡在页面加载时被选中,正如您所期望的那样。如果单击第一个选项卡(包含fullcalendar),则只显示fullcalendar的“Today<>”标题按钮。如果单击其中一个按钮,则fullcalendar的其余部分将呈现 如果在页面加载时选择了选项卡0,则fullcalendar会按预期立即绘制 代码如下:fullcalendar不会在未选择的jqxtab中呈现,fullcalendar,jqxwidgets,Fullcalendar,Jqxwidgets,如果“selectedItem”选项卡不是包含fullcalendar的选项卡,则fullcalendar将不会在jqxtab中呈现。假设日历在选项卡0上,我的selectedItem设置为选项卡1。第二个选项卡在页面加载时被选中,正如您所期望的那样。如果单击第一个选项卡(包含fullcalendar),则只显示fullcalendar的“Today”标题按钮。如果单击其中一个按钮,则fullcalendar的其余部分将呈现 如果在页面加载时选择了选项卡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>
Fullcalendar只有在可见时才能渲染。您找到的修复程序不适用于淡入淡出,因为它在触发tabclick事件时不可见 简单的解决方法是使用超时。它甚至似乎没有实际的延迟(只是在其他代码完成后运行):
$('#jqxTabs').on('selected', function (event) {
$('#calendar').fullCalendar('render');
});
$('#jqxTabs').on('tabclick', function (event) {
window.setTimeout(
function(){
$('#fc2').fullCalendar('render');
});
});