Bootstrap and rendering Arshaw Fullcalendar in a tab

Question

I am using Arshaw Fullcalendar with Bootstrap 3.0 and want to show the calendar in a tab - currently when I open the tab which has the calendar included I can only see the day/week/month/today etc buttons and upon clicking one of these the calendar renders.

According to http://arshaw.com/fullcalendar/docs/display/render/ I need add some code to tell the tabs to render the calendar when the tab is loaded.

I have tried adding this code to the same page as the tabs are loaded but it doesn't render and an error in the console of

Uncaught ReferenceError: module is not defined

showing under the line $('#myTab').tabs({

JS (I am already including jquery,fullcalendar.js and bootstrap.js)

<script>
    $(document).ready(function() {
        $('#myTab').tabs({
            activate: function(event, ui) {
                $('#calendar').fullCalendar('render');
            }
        });
    });
</script>

HTML

<div class="relative row block">
    <ul class="nav nav-tabs margin_b_10 row block relative" id="myTab">
        <li class="active transition3 row block">
            <a href="#announcements" data-toggle="tab">
                <span class="circle_plus"><i class="icon-small icon-bubbles2"></i></span>
                <br>Announcements
            </a>
        </li>

        <li class="transition3 row block">
            <a href="#calendar-tab" data-toggle="tab">
                <span class="circle_plus"><i class="icon-small icon-calendar2"></i></span>
                <br>Calendar
            </a>
        </li>
    </ul>
</div>

<div class="tab-content medium_padding_class_2 text-left" id="myTabContent">
    <div class="tab-pane fade in active" id="announcements">
        <p class="color_silver row">
            Announcements text
        </p>
    </div>

    <div class="tab-pane fade in active" id="calendar-tab">
        <p class="color_silver row">
            <div id="calendar"></div>
        </p>
    </div>
</div>  

How can I get the calendar to render fully in the tab when it is clicked?

Answer 1

I found this issue too. Reading the documentation for the Tab widget http://getbootstrap.com/javascript/#tabs I found that I could use the last event dispatched by the widget

shown.bs.tab (on the newly-active just-shown tab, the same one as for the show.bs.tab event)

which is sent after the tab is visible. This way this invocation of the render method is going to work because the parent HTML container element is already visible (no need to wait for an undefined amount of time hoping that the container is already visible).

My solution was using something like this:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    $('#calendar').fullCalendar('render');
});