twitter-bootstrap - example - full calendar events

FullCalendar Dentro de Twitter Bootstrap Tabs

Question

¿Alguien ha logrado que FullCalendar funcione en las pestañas de Twitter Bootstrap 3?

Tengo el siguiente código;

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

Cuando se ejecuta este código, veo la pestaña pero no el contenido del calendario.

Si elimino ''class = "tab-content" de la segunda división, entonces la pestaña y el calendario se muestran bien, pero no obtengo la funcionalidad de la pestaña.

Obviamente, hay cierta contención entre las dos piezas de software bajo el capó. ¿Alguien tiene una solución?

Answer 1

Temo que responda a mi propia pregunta (no está en contra de las reglas, ¿verdad?);

El siguiente código hace el truco;

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

El principal problema fue que FullCalendar no cargará un control de Calendario si no está en una página mostrada.