fullcalendar 不会在未选择的 jqxtab 中呈现
fullcalendar does not render in an unselected jqxtab
我遇到一个问题,如果 "selectedItem" 选项卡不是包含完整日历的选项卡,则完整日历将不会在 jqxtab 中呈现。所以假设日历在选项卡 0 上,我的 selectedItem 设置为选项卡 1。第二个选项卡在页面加载时被选中,正如您所期望的那样。如果我随后单击第一个选项卡(包含完整日历),则唯一显示的是完整日历的 "Today < >" Header 按钮。如果我点击其中一个按钮,那么其余的全日历就会呈现。
如果在页面加载时选择了选项卡 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');
});
全日历只有在可见时才能呈现。您找到的修复不适用于 fade,因为它在 tabclick 事件触发时不可见。
简单的解决方法是使用超时。它甚至似乎没有实际延迟(只是在其他代码完成后运行):
$('#jqxTabs').on('tabclick', function (event) {
window.setTimeout(
function(){
$('#fc2').fullCalendar('render');
});
});
我遇到一个问题,如果 "selectedItem" 选项卡不是包含完整日历的选项卡,则完整日历将不会在 jqxtab 中呈现。所以假设日历在选项卡 0 上,我的 selectedItem 设置为选项卡 1。第二个选项卡在页面加载时被选中,正如您所期望的那样。如果我随后单击第一个选项卡(包含完整日历),则唯一显示的是完整日历的 "Today < >" Header 按钮。如果我点击其中一个按钮,那么其余的全日历就会呈现。
如果在页面加载时选择了选项卡 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');
});
全日历只有在可见时才能呈现。您找到的修复不适用于 fade,因为它在 tabclick 事件触发时不可见。
简单的解决方法是使用超时。它甚至似乎没有实际延迟(只是在其他代码完成后运行):
$('#jqxTabs').on('tabclick', function (event) {
window.setTimeout(
function(){
$('#fc2').fullCalendar('render');
});
});