Twitter Bootstrap选项卡中的FullCalendar
Twitter Bootstrap选项卡中的FullCalendar
提问于 2013-11-06 12:07:20
有没有人能让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=”标签内容“”，那么标签和日历显示ok，但我没有获得标签功能。
显然，这两个软件之间在幕后存在一些争执。谁有变通的办法？
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-11-07 04:44:21
恐怕我会回答我自己的问题(这不违反规则，对吧?)；
下面的代码做到了这一点；
$(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将不会加载该控件。
Stack Overflow用户
发布于 2020-07-11 00:43:12
不知道为什么，但对于我来说，使用Fullcalendar3 & Bootstrap 4，我必须使用：
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$('#calendar1').fullCalendar('rerenderEvents');
$('#calendar2').fullCalendar('rerenderEvents');
});Stack Overflow用户
发布于 2021-04-27 23:20:20
有一件事对我很有效，我不确定这是不是合适，但是渲染之后，在时间线上做一个点击事件。
calendar.render();
$(".fc-resourceTimelineSevenDay-button").click();或
calendar.render();
$(".fc-dayGridMonth-button").click();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19803926
复制相关文章
相似问题
腾讯云开发者
