Question

有没有人设法在Twitter Bootstrap 3标签中使用FullCalendar？

我有以下代码;

<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”'，那么选项卡和日历显示正常，但我没有获得标签功能。

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

Answer 1

害怕我会回答我自己的问题（这不符合规则吗？）;

以下代码可以解决问题;

    $(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如果不在显示的页面上，则不会加载Calendar控件。

Answer 2

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

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

Answer 3

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

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

或

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

Twitter引导程序选项卡中的FullCalendar

3 个答案: