Question

我将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>

由于

Answer 1

默认情况下，FullCalendar不会在隐藏元素内部渲染。并且show event binder 不适用于适用于jqxTabs。它仅适用于jQuery UI选项卡。

尝试选择的事件活页夹：

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

此处3是保存日历的标签的索引。您可以在此处提出适用于您案例的任何条件。

Answer 2

尝试将容器放在隐藏的标签中：

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

然后将日历初始化HTML放在可见的标签外侧。

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

日历将使用标准的fullCalendar（）JS。

在标签之外呈现

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

下一步是使用jQuery .appendTo（）函数将日历移动到容器中的隐藏选项卡。这里是JS全部放在一起。希望有所帮助。

$("#calendar").fullCalendar().appendTo("#calendar-container");

Answer 3

试试这个：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    $('#calendar').fullCalendar('render');
})

选项卡内的完整日历rending（不是ui标签）

3 个答案: