FullCalendar Within Twitter Bootstrap Tabs

Question

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 ?

Answer 1

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

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