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.