Arshaw Fullcalendar bootstrap and rendering tab

Question

I am using Arshaw Fullcalendar with Bootstrap 3.0 and want to show the calendar in the tab - currently, when I open the tab with the calendar on, I can only see the day / week / month / today buttons and when I click the button the calendar is displayed.

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

I tried to add this code to the same page as the loaded tabs, but it does not appear and there is an error in the console

Uncaught ReferenceError: module is not defined

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

JS (I already include 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 make the calendar display the tab completely when clicked?

Answer 1

. Tab http://getbootstrap.com/javascript/#tabs , ,

.bs.tab( , , show.bs.tab)

. , render , HTML ( undefined, , ).

- :

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

Answer 2

, fullcalendar , , , element.is(':visible'), element , fullcalendar.

, , click , , , . , -, , . :

 $(document).ready(function() {
    $('#myTab').tabs({
        activate: function(event, ui) {
            if( $('#calendar').is(':visible')){
                $('#calendar').fullCalendar('render');
            }
            else{
                //change 2000 for whatever works for you.
                setTimeout(function(){ $('#calendar').fullCalendar('render');},2000);
            }
        }
    });
 });