Question

我正在将jQuery插件full calendar与backbone.js结合使用，并且遇到第一次加载时无法正常显示的问题。

这是包含日历的骨干视图的渲染功能：

render: function() {

    var that = this;

    // DEBUG:
    // console.log({entries: data});

    this.$el.html(this.template(this.serialize()));

    this.$('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },

        height: that.$el.parent().height()
    });

            // prints undefined
    console.log(this.$('#calendar').fullCalendar('getView').title);

    window.setTimeout(function() {
        this.$('#calendar').fullCalendar('changeView','agendaWeek');
    }, 500);


    return this;
}

你可以看到我有500毫秒的设置超时。当我延迟500毫秒，然后将视图更改为agendaWeek时，它将显示。但是，如果我没有延迟，则日历不会显示。两种情况都不会打印错误。

我无法在这里尝试或可能出现的问题。是否存在我在文档中遗漏的日历创建回调？

由于

编辑：可能是.html（）功能不完整并导致问题吗？

Answer 1

我遇到了类似的问题，并在文档中找到了这些重要信息：

http://arshaw.com/fullcalendar/docs/display/render/

我的日历位于当前未选中的选项卡上，使父容器不可见，因此未正确绘制。选择选项卡后添加了对render方法的调用，这一切都很有效。

您的问题可能会以类似的方式解决。

Answer 2

我正在使用backbone.js，我也有同样的问题。

我在OnRender()事件中声明并初始化日历。

稍后为解决此问题，我将用于声明和初始化日历的代码移动到OnShow()事件中。

问题：

根据我的问题，这是因为DOM上没有require元素。当你的DOM完全准备好时，OnShow()会被触发。

最后它对我有用。

加载时不显示完整日历（带主干）

2 个答案: