Bootstrap Twitter引导选项卡中的FullCalendar

2mbi3lxu  于 2022-12-08  发布在  Bootstrap
关注(0)|答案(4)|浏览(167)

有没有人设法让全日历工作在Twitter引导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”',那么选项卡和日历显示正常,但我没有获得选项卡功能。
很明显,这两个软件之间存在一些冲突。有人有解决办法吗?

ldxq2e6h

ldxq2e6h1#

害怕我会回答自己的问题(这不违反规则吧?)
下面的代码可以实现这个目的;

$(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>

主要的问题是,如果Calendar控件不在显示的页面上,FullCalendar将不会加载该控件。

gjmwrych

gjmwrych2#

不知道为什么,但对我来说,使用Fullcalendar3和Bootstrap 4,我不得不用途:

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

flseospp3#

有一件事对我来说很有效,不确定这是否合适,但渲染后在时间线的某一天或某一个月的视图上执行单击事件。

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

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

rpppsulh4#

这对我有用!

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

相关问题