0

我已将 fullcalendar 放置在基于jqwidgets的选项卡内。

当我单击所选选项卡时，会显示第一行按钮，但不会显示日历本身。一旦您单击顶行按钮之一，日历就会显示。

我已经阅读了这里有关如何使用标准 ui.tabs 组件执行此操作的其他帖子，并尝试了它，但它不起作用。这是我所拥有的：

<script type="text/javascript">
    jQuery(document).ready(function () {
        var theme = '';
        // Create jqxTabs.
        jQuery('#classInfo').jqxTabs({ 
            width: "100%", 
            height: "1000px", 
            autoHeight: false, 
            position: 'top', 
            theme: theme, 
            show: function(event, ui) {
                jQuery('#classcalendar').fullCalendar('render');
                }
        });
        jQuery('#settings div').css('margin-top', '10px');
    });
</script>

谢谢

4

3 回答 3

2

默认情况下，FullCalendar 不会在隐藏元素中呈现。并且显示事件绑定器不适用于 jqxTabs。它仅适用于 jQuery UI 选项卡。

请尝试使用选定的事件绑定器：

$('#classInfo').bind('selected', function (event) { 
  if(event.args.item=="3") {
    jQuery('#classcalendar').fullCalendar('render');
  }
});

这3是包含日历的选项卡的索引。您可以在此处输入适用于您的案例的任何条件。

于 2012-07-03T04:33:29.663 回答
0

尝试在隐藏选项卡中放置一个容器：

<div id='calendar-container'></div>

然后将日历初始化 HTML 放置在选项卡外侧可见的地方。

<div id='calendar'></div>

日历将使用标准的 fullCalendar() JS 在选项卡之外呈现。

$("#calendar").fullCalendar();

下一步是使用 jQuery .appendTo() 函数将日历移动到容器中的隐藏选项卡。这是所有的JS。希望有帮助。

$("#calendar").fullCalendar().appendTo("#calendar-container");
于 2015-04-27T04:52:59.320 回答
0

试试这个：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    $('#calendar').fullCalendar('render');
})
于 2017-09-22T19:59:12.757 回答