Как правильно загрузить плагин jQuery fullcalendar в скрытый раздел? - PullRequest
Новая
       0

Как правильно загрузить плагин jQuery fullcalendar в скрытый раздел?

17 голосов
/ 29 октября 2010

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

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

Ответы [ 9 ]

32 голосов
/ 20 июля 2011

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

Прикрепите его к событию шоу или как угодно: 

$('#calendar').fullCalendar('render');
9 голосов
/ 01 декабря 2010

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

То, что я сделал и работал для меня. 

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

<a href="" id="calendareventlink">View Calendar</a>
3 голосов
/ 10 января 2018

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

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

$('#calendar').fullCalendar('render');
$('#calendar').fullCalendar('refetchEvents');
2 голосов
/ 13 ноября 2012

вы должны использовать 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>

2 голосов
/ 02 февраля 2012

При нажатии на вкладку вызывается что-то вроде этого: 

$('#calendar').fullCalendar('render'); // Force the calendar to render
0 голосов
/ 01 июня 2018

Я обновил fullcalendar.min.js до последней версии (3.9.0), и он работал для меня.

0 голосов
/ 09 декабря 2011

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

0 голосов
/ 04 ноября 2010

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

0 голосов
/ 03 ноября 2010

пробовали ли вы дисплей: скрытый вместо дисплея: нет?

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...