web-dev-qa-db-ja.com

Twitter内のFullCalendar Bootstrapタブ

誰かがTwitter内でFullCalendarを動作させることに成功しましたか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>

このコードを実行すると、タブは表示されますが、カレンダーのコンテンツは表示されません。

2番目のdivから「class = "tab-content"」を削除すると、タブとカレンダーは正常に表示されますが、タブ機能が利用できません。

明らかに、内部の2つのソフトウェアの間にはいくつかの競合があります。誰かが回避策を得ましたか？

twitter-bootstrapfullcalendar
22
Chris C.

私は自分の質問に答えるのを恐れています（それは規則に反していませんか？）;

次のコードでうまくいきます。

    $(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がカレンダーコントロールをロードしないことでした。

58
Chris C.