Как правильно загрузить плагин fullcalendar jQuery в скрытом div

Я использую вкладки инструментов jQuery для разделения моей страницы на вкладки. Один из этих вкладок содержит jQuery Fullcalendar. Поскольку я загружаю JavaScript на странице на скорости и избегаю вспышки неравномерного содержимого, я скрываю первоначально невидимые вкладки, используя display: none. При этом полный календар не отображается должным образом. Он показывает правильные кнопки, но пока я не нажимаю кнопку "Сегодня", календарь не отображается. Если я разрешаю его визуализировать в видимый div, он отображается правильно.

Я могу обойти это, используя события выбора табуляции для рендеринга календаря или перемещения сценариев календаря и вкладок в голову, но я предпочел бы, если бы было более подходящее решение.

Ответ 1

Что вам нужно сделать, это загрузить данные после щелчка ссылки, но не полностью уверен, но я думаю, что проблема в том, что высота не установлена правильно после загрузки данных, поэтому она отображает только верхнюю часть.

Что я сделал и работал у меня.

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

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

Ответ 2

Когда div скрыт, fullCalendar не знает, какой размер он должен отображать, поэтому вам просто нужно вызвать функцию render после того, как вы узнаете, что div виден.

Прикрепите его к событию show или что-то еще:

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

Ответ 3

вы должны использовать javascript для установки отображения none fullcalendar

что-то вроде этого:

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

тогда он выглядит так:

<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>

Ответ 4

Когда вы нажимаете на вкладку, вызовите что-то вроде этого:

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

Ответ 5

У меня возникли проблемы с нажатием кнопки "Сегодня", чтобы календарь появился на вкладке jQueryUI. Я смог полностью решить проблему, инициализируя вкладки ПОСЛЕ того, как я инициализировал календарь. Я, однако, делаю это в начале документа и называя все остальные js незадолго до закрытия тега тела. Надеюсь, это поможет.

Ответ 6

Вы также можете вызвать .resize() для любого элемента parent/ancestor в календаре - когда вы знаете, что календарь виден;)

Ответ 7

Я знаю, что этот вопрос древний, но он вышел первым, когда я искал решение той же проблемы. По какой-то причине предлагаемое решение с render не работает в некоторых конкретных случаях (если на неактивной вкладке загружены записи календаря), поэтому мне пришлось refetchEvents.

Код выглядит следующим образом:

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

Ответ 8

Вы пробовали отображение: скрыто вместо отображения: none?

Не знаю, будет ли это работать, но что-то стоит попробовать.