加载时不显示完整日历(使用主干网)

Question

我将jQuery插件完整日历与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/

我的日历位于当前未选中的选项卡上，导致父容器不可见，因此无法正确绘制。在选择选项卡后添加了对渲染方法的调用，一切都很好。

你的问题可能会以类似的方式得到解决。

Answer 2

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

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

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

问题：

根据我的问题，这是因为DOM上不存在require元素。当您的DOM完全就绪时，OnShow()将被激发。

终于对我起作用了。