FullCalendar在Twitter Bootstrap选项卡中 [英] FullCalendar Within Twitter Bootstrap Tabs

问题描述

我有以下代码;

 < div class =tabbable> 
< ul class =nav nav-tabsid =myTab> 
< li class =active>< a id =defaultTabhref =＃tab_Default>< h5>默认< / h5>< / a>< / li> 
< / ul> 
 
< div class =tab-content> 
< div id =tab_Defaultclass =tab-pane> 
 @ Html.Partial（_ Calendar0）
< / div> 
< / div> 
< / div> 
  

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

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

这两个软件之间显然存在争议。
任何人都有解决方法？

解决方案

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

以下代码可以解决这个问题;

  $ （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-tabsid =myTab> 
< li>< a href =＃tab_Defaultdata-toggle =tab>< h5>默认< / h5>< / a>< / li> 
< li>< a href =＃tab_Choice1data-toggle =tab>< h5> Choice 1< / h5>< / a>< / li> 
< / ul> 
< div class =tab-content> 
< div id =tab_Defaultclass =tab-pane> 
 @ Html.Partial（_ Calendar0）
< / div> 
< div id =tab_Choice1class =tab-pane> 
 @ Html.Partial（_ Calendar1）
< / div> 
< / div> 
  

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

Has anyone managed to get FullCalendar working within Twitter Bootstrap 3 tabs ?

I've the following code;

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

When this code is run I see the tab but no calendar content.

If I remove the 'class="tab-content"' from the second div then the tab and calendar displays ok but I'm not getting the tab functionality.

There's obviously some contention between the two pieces of software under the hood. Anyone got a workaround ?

解决方案

Afraid I'll answer my own question (it's not against the rules is it ?);

The following code does the trick;

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

The main problem was that FullCalendar won't load up a Calendar control if it's not on a displayed page.

这篇关于FullCalendar在Twitter Bootstrap选项卡中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！