在引导弹出窗口中使用完整日历

Question

我目前正在使用bootstrap 2.3.2，我想在导航栏中添加一个包含日历(使用fullCalendar(的弹出窗口。

为此，我创建了一个导航项(称为"timeTop"(，并使用内容的 html 选项添加一个弹出窗口。

<div class="navbar navbar-inverse">
    <div class="navbar-inner">
        <a class="brand" href="#">Title</a>
        <form class="navbar-search pull-right">
            <input type="text" class="search-query" placeholder="Search">
        </form>
        <ul class="nav pull-right">
            <li><a id="timeTop" href="#">11:37</a></li>
        </ul>
    </div>
</div> 

添加日历是下一步：

$('#timeTop').popover({
    "placement" : "bottom",
    "html" : true,
    "title" : "fullcalendar",
    "content" : function () {
        var contentHolder = $('<div />');
        var calendar = $('<div />', {
            "id" : "calendar"
        });
        calendar.fullCalendar({});
        contentHolder.append(calendar);
        return contentHolder.html();
    }
});

这项工作(我的日历已正确添加到我的弹出窗口中(，但我遇到了显示问题。我的弹出框不显示我的日历，只显示标题。

我

做了一个小提琴重现我的问题：http://jsfiddle.net/rqhWR/5/

在这里，我有2个日历：

• 一个在弹出框中，仅显示日历标题。

• 一个在主div中，也只显示日历标题。

(这似乎是同样的问题。在本地页面中使用代码将显示包含日历的主要内容，以及仅包含标题的弹出窗口(。

我知道 fullCalendar('render'( 的存在，但我无法让它在我的情况下工作(我不知道我的弹出窗口何时显示(。

我的目标是为弹出窗口提供一个完整的日历，结果如下：http://jsfiddle.net/pYGBm/75/

非常感谢您的帮助。

Answer 1

有 2 个问题。首先，您使用的全日历版本(1.5.1(已过期。更新到 1.6.4 修复了主日历无法加载的问题。

第二个问题似乎是由于初始化日历时，它实际上还不可见，所以我猜计算宽度/高度存在一些问题。在创建弹出窗口后初始化日历似乎可以解决此问题。多亏了这个答案，我才能为弹出框创建添加回调。

您可以在此处查看更新的工作示例：http://jsfiddle.net/rqhWR/9/

var tmp = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function () {
  tmp.call(this);
  if (this.options.callback) {
    this.options.callback();
  }
}
$('#timeTop').popover({
    "placement" : "bottom",
    "html" : true,
    "title" : "fullcalendar",
    "content" : function () {
        var contentHolder = $('<div />');
        var calendar = $('<div />', {
            "id" : "calendar"
        });
        contentHolder.append(calendar);
        return contentHolder.html();
    },
    callback: function() { 
      var calendar = $("#calendar");
      calendar.fullCalendar({});
    }
});
$('#calendar2').fullCalendar({});

仍然存在一些问题(即每次单击弹出框时日历重新初始化 - 可能不可取(和需要代码清理，但我希望这是朝着您要完成的目标迈出的一步。