如何在隐藏的div中正确加载jQuery fullcalendar插件 [英] How do I properly load the jQuery fullcalendar plugin in a hidden div

问题描述

我正在使用jQuery工具选项卡将页面分为多个选项卡.这些选项卡之一包含jQuery Fullcalendar.因为我在页面中最后加载JavaScript是为了提高速度并避免闪烁未样式化的内容，所以我使用display:none隐藏了最初看不见的标签.这样做时，全日历无法正确渲染.它显示了正确的按钮，但是在我按下今天"按钮之前，没有显示日历.如果我允许它呈现为可见的div，它将正确显示.

I'm using the jQuery tools tabs to divide my page into tabs. One of those tabs contain a jQuery Fullcalendar. Because I load JavaScript last in the page for speed and to avoid flash of unstyled content, I hide the initially unseen tabs using display:none. When doing this, the fullcalendar doesn't render properly. It shows the proper buttons, but until I press the today-button, no calendar is shown. If I allow it to render into a visible div, it displays properly.

我可以使用选项卡选择事件来呈现日历或通过将日历和选项卡脚本移到头部来解决此问题，但我希望有一个更合适的解决方案.

I can work around this using the tab-select events to render the calendar or by moving the calendar and tab scripts to the head, but I'd rather if there was a more proper solution.

推荐答案

您需要做的是在单击链接后加载数据，虽然不能完全确定，但是我认为问题是高度不能正确设置.数据已加载，因此仅显示顶部.

What you need to do is load the data after the link is clicked, not entirely sure but i think the issue is that the height is not set correctly after the data is loaded so it only shows the top part.

我为我所做的工作.

$(document).ready(function() {
    $("#calendareventlink").click ( function(){
      loadCalendar();
    });
});
function loadCalendar(){
  //Do your data loading here
}

<a href="" id="calendareventlink">View Calendar</a>

这篇关于如何在隐藏的div中正确加载jQuery fullcalendar插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！