首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Twitter Bootstrap选项卡中的FullCalendar

Twitter Bootstrap选项卡中的FullCalendar
EN

Stack Overflow用户
提问于 2013-11-06 12:07:20
回答 3查看 10.1K关注 0票数 23

有没有人能让FullCalendar在Twitter Bootstrap 3选项卡中运行?

我有以下代码;

代码语言:javascript
复制
<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=”标签内容“”,那么标签和日历显示ok,但我没有获得标签功能。

显然,这两个软件之间在幕后存在一些争执。谁有变通的办法?

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2013-11-07 04:44:21

恐怕我会回答我自己的问题(这不违反规则,对吧?);

下面的代码做到了这一点;

代码语言:javascript
复制
    $(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将不会加载该控件。

票数 60
EN

Stack Overflow用户

发布于 2020-07-11 00:43:12

不知道为什么,但对于我来说,使用Fullcalendar3 & Bootstrap 4,我必须使用:

代码语言:javascript
复制
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    $('#calendar1').fullCalendar('rerenderEvents');
    $('#calendar2').fullCalendar('rerenderEvents');
});
票数 1
EN

Stack Overflow用户

发布于 2021-04-27 23:20:20

有一件事对我很有效,我不确定这是不是合适,但是渲染之后,在时间线上做一个点击事件。

代码语言:javascript
复制
calendar.render();
$(".fc-resourceTimelineSevenDay-button").click();

代码语言:javascript
复制
calendar.render();
$(".fc-dayGridMonth-button").click();
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/19803926

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档