Question

我目前正在使用bootstrap 2.3.2，我想在导航栏中添加一个包含日历的popover（使用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();
    }
});

这项工作（我的日历正确添加到我的popover中），但我遇到了显示问题。我的popover不显示我的日历，只显示标题。

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

在这里，我有2个日历：

popover中的一个，仅显示日历标题。
主div中的一个，也只显示日历标题。

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

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

我的目标是为popover创建一个fullcalendar，结果如下： http://jsfiddle.net/pYGBm/75/

非常感谢你的帮助。

Answer 1

有2个问题。首先，您使用的fullcalendar版本（1.5.1）已过期。更新到1.6.4修复了主日历未加载的问题。

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

您可以在此处查看更新的工作示例：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({});

仍然存在一些问题（即每次单击弹出窗口时日历重新初始化 - 可能不合适）并且需要进行代码清理，但我希望这是朝着您要完成的任务迈出的一步。

在引导程序弹出窗口中使用fullcalendar

1 个答案: