1

我目前正在使用引导程序 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/

非常感谢你的帮助。

4

1 回答 1

1

有2个问题。首先，您使用的 fullcalendar 版本 (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({});

仍然存在一些问题（即每次单击弹出框时日历都会重新初始化——可能不理想）并且需要进行代码清理，但我希望这是朝着您想要完成的目标迈出的一步。

于 2013-10-04T20:14:49.730 回答