发表新帖
发表新帖

How do I properly load the jQuery fullcalendar plugin in a hidden div

后端 未结
关注
10 1228
执念已碎
执念已碎 2021-01-01 16:47

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 av

相关标签:
10条回答
  • 一向
    2021-01-01 17:05

    you must using javascript to set 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>

    0 讨论(0)
  • 傲寒
    2021-01-01 17:11

    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.

    Attach it to the show event or whatever:

    $('#calendar').fullCalendar('render');
    0 讨论(0)
  • 一向
    2021-01-01 17:15

    When you click on the tab call something like this:

    $('#calendar').fullCalendar('render'); // Force the calendar to render
    0 讨论(0)
  • 梦谈多话
    2021-01-01 17:18

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

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

    0 讨论(0)
  • 生来不讨喜
    2021-01-01 17:21

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

    0 讨论(0)
  • 暖寄归人
    2021-01-01 17:24

    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>
    0 讨论(0)
 看不清?
提交回复
热议问题