如何在隐藏的div中正确加载jQuery fullcalendar插件

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.

我正在使用jQuery工具选项卡将我的页面划分为选项卡。其中一个选项卡包含jQuery Fullcalendar。因为我在页面中最后加载JavaScript以提高速度并避免无格式内容的闪烁,所以我使用display:none来隐藏最初看不见的选项卡。执行此操作时,fullcalendar无法正确呈现。它显示正确的按钮,但在我按下今日按钮之前,没有显示日历。如果我允许它渲染成可见的div,它会正确显示。

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.

我可以使用选项卡选择事件来渲染日历或将日历和选项卡脚本移动到头部,但我宁愿有更合适的解决方案。

9 个解决方案

#1

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.

您需要做的是在单击链接后加载数据,不完全确定,但我认为问题是加载数据后高度未正确设置,因此它只显示顶部。

What i have done and worked for me.

我做了什么,为我工作过。

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

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

#2

When the div is hidden, fullCalendar doesn't know what size it should render itself, so you just need to call the render function after you know that the div is visible.

当div被隐藏时,fullCalendar不知道它应该渲染自己的大小,所以你只需要在知道div可见之后调用render函数。

Attach it to the show event or whatever:

将它附加到show事件或其他任何事情:

$('#calendar').fullCalendar('render');

#3

When you click on the tab call something like this:

当您单击选项卡时,请调用以下内容:

$('#calendar').fullCalendar('render'); // Force the calendar to render

#4

you must using javascript to set display none fullcalendar

你必须使用javascript来设置display none fullcalendar

something like this:

像这样的东西:

                document.getElementById("test").style.display="none";

then it looks like this:

那么它看起来像这样:

<html>
<head>
    <link rel='stylesheet' type='text/css' href='bigcalendar.css' />
    <script type='text/javascript' src='jquery-1.8.1.min.js'></script>
    <script type='text/javascript' src='bigcalendar.js'></script>   

    <script type='text/javascript'>


        $(document).ready(function() {

            $('#bigCalendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                editable: false,
                events: [{"id":111,"title":"Event1","start":"2012-11-10","url":"http:\/\/yahoo.com\/"},{"id":222,"title":"Event2","start":"2012-11-20","end":"2012-11-22","url":"http:\/\/yahoo.com\/"}]
            });

            document.getElementById("test").style.display="none";
        });





        function closeEventDetails(){

            $("#test").hide("fast");
        }



        function showBigCalendar(){

            $("#test").show("fast");

            //                $('#bigCalendar').fullCalendar( 'render' )

        }



        $(document).ready(function() {
        });

    </script>

    <style type='text/css'>

        body {
            margin-top: 40px;
            text-align: center;
            font-size: 14px;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        }

        #bigcalendar {
            width: 900px;
            margin: 0 auto;
        }

    </style>

</head>
<body>


    <!--zobrazenie velkeho kalendara-->

    <button onclick="showBigCalendar();"  >open</button>
    <button  onclick="closeEventDetails();">close</button>

    <div id="test" ><div id="bigCalendar" ></div></div>


</body>

#5

I know this question is ancient, but it came out first while I was searching for the solution for the same problem. For some reason the proposed solution with render doesn't work in some specific cases (if the inactive tab is loaded with calendar entries), so I had to refetchEvents.

我知道这个问题很古老,但是当我在寻找同样问题的解决方案时,它首先出现了。出于某种原因,使用渲染的建议解决方案在某些特定情况下不起作用(如果非活动选项卡加载了日历条目),所以我不得不refetchEvents。

The code is as follows:

代码如下:

$('#calendar').fullCalendar('render');
$('#calendar').fullCalendar('refetchEvents');

#6

I was having trouble with the having to click the "today" button to make the calendar actually appear in a jQueryUI tab. I was able to solve the problem completely by initializing the tabs AFTER I initialized the calendar. I am, however, doing this in the head of the document, and calling all other js just before the close of the body tag. Hope that helps.

我无法点击“今天”按钮使日历实际显示在jQueryUI选项卡中。通过在初始化日历后初始化选项卡,我能够完全解决问题。但是,我在文档的头部执行此操作,并在body标记结束之前调用所有其他js。希望有所帮助。

#7

You can also call .resize() for any parent/ancestor element of the calendar -- when you know the calendar is visible ;)

您还可以为日历的任何父/祖先元素调用.resize() - 当您知道日历可见时;)

#8

I upgraded the fullcalendar.min.js to the latest version (3.9.0) and it worked for me.

我将fullcalendar.min.js升级到最新版本(3.9.0),它对我有用。

#9

-2

have you tried display:hidden instead of display:none?

你试过显示:隐藏而不是显示:无?

No idea whether it will work, but something worth trying.

不知道它是否会起作用,但值得尝试。

#1