javascript 加载时不显示完整日历（带主干）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18195941/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
full calendar not displaying when loaded (with backbone)
提问by Troy Cosentino
I am using the jQuery plugin full calendarin conjunction with backbone.js and having an issue where it does not display properly when first loading.
我将 jQuery 插件完整日历与backbone.js 结合使用，但遇到了第一次加载时无法正确显示的问题。
This is my render function for the backbone view containing the calendar:
这是包含日历的主干视图的渲染函数：
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;
}
You can see I have a set timeout for 500 ms included. When I delay that 500 ms, and then change the view to agendaWeek, it will display. However, if I do not delay, the calendar does not show. There are no errors printed in either case.
您可以看到我设置了 500 毫秒的超时时间。当我延迟 500 毫秒，然后将视图更改为议程周时，它将显示。但是，如果我不延迟，日历就不会显示。在这两种情况下都没有打印错误。
I am at a loss of what to try here or what might be going wrong. Is there a callback for the creation of the calendar that I am missing somewhere in the docs?
我不知道在这里尝试什么或可能出现什么问题。是否有创建日历的回调我在文档中的某处丢失了？
Thanks
谢谢
EDIT: could it be that the .html() funciton isn't complete and causing an issue?
编辑：可能是 .html() 函数不完整并导致问题吗？
回答by Stig Husby
I had a similar problem and found this important information in the docs:
我遇到了类似的问题，并在文档中找到了以下重要信息：
http://arshaw.com/fullcalendar/docs/display/render/
http://arshaw.com/fullcalendar/docs/display/render/
My calendar was on a tab currently not selected making the parent container not visible and thus not drawn correctly. Added a call to the render method after selecting the tab and it all worked great.
我的日历位于当前未选中的选项卡上，因此父容器不可见，因此未正确绘制。在选择选项卡后添加了对渲染方法的调用，一切都很好。
Your issue might be solved in a similar way.
您的问题可能会以类似的方式解决。
回答by Dhaval SHAH
I am using backbone.js and I too had the same issue.
我正在使用backbone.js，我也有同样的问题。
I was declaring and initializing calendar in OnRender()event.
我在OnRender()事件中声明和初始化日历。
Later to solve this issue I moved the code for declaring and initializing calendar into an OnShow()event.
后来为了解决这个问题，我将声明和初始化日历的代码移到了一个OnShow()事件中。
Issue:
问题：
According to my issue it was because require element was not present on the DOM. OnShow()gets fired when your DOM is completely ready.
根据我的问题，这是因为 DOM 上不存在 require 元素。OnShow()当你的 DOM 完全准备好时被触发。
Finally it worked for me.
最后它对我有用。
