fullcalendar在未选定的jqxtab中不呈现

我遇到问题，如果“selectedItem”选项卡不是包含fullcalendar的选项卡，fullcalendar将不会在jqxtab中呈现。因此，可以说日历在选项卡0上，而我的selectedItem设置为选项卡1.第二个选项卡在页面加载时被选中，正如您所期望的那样。如果我然后单击第一个选项卡（包含fullcalendar），则唯一显示的内容是“今日<>”全标志的标题按钮。如果我点击其中一个按钮，那么fullcalendar的其余部分呈现。fullcalendar在未选定的jqxtab中不呈现

如果在页面加载时选择了选项卡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'); 
});

来源

2015-02-07 Jon Keller

Fullcalendar只能在可见的情况下渲染。您发现的修复程序无法使用淡入淡出效果，因为在tabclick事件触发时它不可见。

简单修复就是使用超时。它甚至似乎没有实际的延迟（仅在其他代码完成后运行）：

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

来源

2015-02-13 21:34:10 slicedtoad

fullcalendar在未选定的jqxtab中不呈现

回答

相关问题