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

【问题标题】：Bootstrap and rendering Arshaw Fullcalendar in a tab在选项卡中引导和渲染 Arshaw Fullcalendar
【发布时间】：2014-05-28 17:37:43
【问题描述】：

我正在使用带有 Bootstrap 3.0 的 Arshaw Fullcalendar 并希望在选项卡中显示日历 - 目前，当我打开包含日历的选项卡时，我只能看到日/周/月/今天等按钮，然后单击一个其中日历呈现。

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

我已尝试将此代码添加到加载选项卡时的同一页面，但它不会呈现并且控制台中出现错误

Uncaught ReferenceError: module is not defined

显示在 $('#myTab').tabs({

行下方

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>

如何让日历在被点击时在标签中完全呈现？

【问题讨论】：

我注意到#calendar div 没有关闭有一个错字，但错误似乎表明您在使用渲染之前没有初始化日历插件。在调用 render 之前你是否有类似的东西： $('#calendar').fullCalendar({ // 把你的选项和回调放在这里 });
是的，抱歉，这是一个错字，但您怀疑这不是问题 - 是的，之前调用了 fullCalendar 的代码。一旦我单击顶部的任何 fullCalendar 按钮（例如今天、周、月、日等），它就会正常加载，因此日历本身可以正常工作，但如果不单击其中一个按钮就不会呈现

标签： jquery twitter-bootstrap-3 fullcalendar

【解决方案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');
});

【讨论】：

【解决方案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);
            }
        }
    });
 });

【讨论】：