FullCalendar внутри Twitter Загрузочные вкладки

Кто-нибудь смог получить 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>

Когда этот код запущен, я вижу вкладку, но не содержимое календаря.

Если я удаляю вкладку "class=" вкладки "" из второго div, то вкладка и календарь отображаются нормально, но я не получаю функциональные возможности вкладки.

Очевидно, что существует определенная разногласия между двумя частями программного обеспечения под капотом. Кто-нибудь получил обход?

Ответы

Ответ 1

Боюсь, я отвечу на свой вопрос (это не против правил?);

Следующий код выполняет трюк:

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

Основная проблема заключалась в том, что FullCalendar не будет загружать элемент управления календарем, если он не отображается на отображаемой странице.