在选项卡中引导和渲染Arshaw Fullcalendar

Question

我正在使用带有Bootstrap 3.0的Arshaw Fullcalendar并希望在标签中显示日历 - 目前当我打开包含日历的标签时,我只能看到日/周/月/今等按钮,点击其中一个按钮日历渲染.

根据http://arshaw.com/fullcalendar/docs/display/render/我需要添加一些代码来告诉选项卡在加载选项卡时呈现日历.

我已经尝试将此代码添加到与加载选项卡相同的页面但是它不会呈现并且在控制台中出错

Uncaught ReferenceError: module is not defined

显示在$('#myTab')行下的标签({({

JS(我已经包括jquery,fullcalendar.js和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>  

如何在单击选项卡时让日历完全呈现在选项卡中？

Answer 1

我也发现了这个问题.阅读Tab小部件的文档http://getbootstrap.com/javascript/#tabs我发现我可以使用小部件调度的最后一个事件

shown.bs.tab(在新活动的刚刚显示的选项卡上,与show.bs.tab事件相同)

选项卡可见后发送.这样,这种render方法的调用将起作用,因为父HTML容器元素已经可见(无需等待未定义的时间,希望容器已经可见).

我的解决方案是使用这样的东西:

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