23

有没有人设法让 FullCalendar 在 Twitter Bootstrap 3 选项卡中工作？

我有以下代码；

<div class="tabbable">
   <ul class="nav nav-tabs" id="myTab">
     <li class="active"><a id="defaultTab" href="#tab_Default"><h5>Default</h5></a></li>
   </ul>

   <div class="tab-content">
      <div id="tab_Default" class="tab-pane">
         @Html.Partial("_Calendar0")
      </div>
   </div>
</div>

运行此代码时，我看到选项卡但没有日历内容。

如果我从第二个 div 中删除 'class="tab-content"'，则选项卡和日历显示正常，但我没有获得选项卡功能。

引擎盖下的两个软件之间显然存在一些争论。有人有解决方法吗？

4

3 回答 3

60

恐怕我会回答我自己的问题（这不违反规则吗？）；

以下代码可以解决问题；

    $(document).ready(function () {
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            $('#calendar0').fullCalendar('render');
            $('#calendar1').fullCalendar('render');
        });
        $('#myTab a:first').tab('show');
    });

    <div class="tabbable">
      <ul class="nav nav-tabs" id="myTab">
        <li><a href="#tab_Default" data-toggle="tab"><h5>Default</h5></a></li>
        <li><a href="#tab_Choice1" data-toggle="tab"><h5>Choice 1</h5></a></li>
      </ul>
      <div class="tab-content">
        <div id="tab_Default" class="tab-pane">
            @Html.Partial("_Calendar0")
        </div>
        <div id="tab_Choice1" class="tab-pane">
            @Html.Partial("_Calendar1")
        </div>
      </div>
    </div>

主要问题是如果日历控件不在显示的页面上，FullCalendar 将不会加载它。

于 2013-11-06T20:44:20.660 回答
1

不知道为什么，但对我来说，使用 Fullcalendar3 和 Bootstrap 4，我不得不使用：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    $('#calendar1').fullCalendar('rerenderEvents');
    $('#calendar2').fullCalendar('rerenderEvents');
});
于 2020-07-10T16:43:12.033 回答
0

对我有用的一件事，不确定这是否正确，但在渲染后，在时间线日或月视图之一上执行单击事件。

calendar.render();
$(".fc-resourceTimelineSevenDay-button").click();

或者

calendar.render();
$(".fc-dayGridMonth-button").click();
于 2021-04-27T15:20:20.217 回答