Как да заредя правилно плъгина jQuery fullcalendar в скрит div

Използвам разделите на инструментите на jQuery, за да разделя страницата си на раздели. Един от тези раздели съдържа jQuery Fullcalendar. Тъй като зареждам JavaScript последен в страницата за бързина и за да избегна проблясване на нестилизирано съдържание, скривам първоначално невидимите раздели с помощта на display:none. Когато правите това, пълният календар не се изобразява правилно. Показва правилните бутони, но докато не натисна бутона за днес, не се показва календар. Ако му позволя да се изобрази във видим div, той се показва правилно.

Мога да заобиколя това, като използвам събитията за избор на раздел, за да изобразя календара или като преместя календара и скриптовете за раздели в главата, но бих предпочел да има по-подходящо решение.


jquery fullcalendar
person Jens Alm    schedule 29.10.2010    source източник

Отговори (10)


arrow_upward
10
arrow_downward

Това, което трябва да направите, е да заредите данните след щракване върху връзката, не съм напълно сигурен, но мисля, че проблемът е, че височината не е зададена правилно след зареждане на данните, така че показва само горната част.

Какво съм направил и работил за мен.

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

<a href="/bg" id="calendareventlink">View Calendar</a>
person user527007    schedule 01.12.2010
comment
Това всъщност е повече или по-малко това, което направих и аз в крайна сметка, обвързването му към събитието за показване на раздели на моите раздели, работи доста добре, въпреки че се чувства като хак :) - person Jens Alm; 01.12.2010

arrow_upward
34
arrow_downward

Когато div е скрит, fullCalendar не знае какъв размер трябва да изобрази, така че просто трябва да извикате функцията render, след като разберете, че div е видим.

Прикачете го към събитието на шоуто или друго:

$('#calendar').fullCalendar('render');
person ggez44    schedule 20.07.2011
comment
Да, това беше, което накрая направих, вижте коментара ми към първия отговор :) - person Jens Alm; 20.07.2011
comment
Много предпочитам това решение, вместо да се налага да извиквам отново целия начален скрипт (винаги не обичам да изпълнявам скриптове многократно, ако има някакъв вид презареждане, опресняване или в този случай налична опция за изобразяване) - person JakeJ; 16.01.2015

arrow_upward
3
arrow_downward

Знам, че този въпрос е древен, но се появи първи, докато търсех решението на същия проблем. По някаква причина предложеното решение с render не работи в някои конкретни случаи (ако неактивният раздел е зареден със записи в календара ), така че трябваше да refetchEvents.

Кодът е както следва:

$('#calendar').fullCalendar('render');
$('#calendar').fullCalendar('refetchEvents');
person AntonK    schedule 10.01.2018

arrow_upward
2
arrow_downward

Когато щракнете върху раздела, извикайте нещо подобно:

$('#calendar').fullCalendar('render'); // Force the calendar to render
person la_antorcha    schedule 01.02.2012

arrow_upward
2
arrow_downward

трябва да използвате javascript, за да настроите display none fullcalendar

нещо като това:

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

тогава изглежда така:

<html>
<head>
    <link rel='stylesheet' type='text/css' href='/bgbigcalendar.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>

person gizmo16    schedule 13.11.2012

arrow_upward
0
arrow_downward

Имах проблеми с необходимостта да щракна върху бутона „днес“, за да накарам календара действително да се появи в раздел jQueryUI. Успях да разреша проблема напълно чрез инициализиране на разделите СЛЕД като инициализирах календара. Аз обаче правя това в главата на документа и извиквам всички други js точно преди затварянето на етикета body. Надявам се това да помогне.

person Mason Stewart    schedule 03.11.2010

arrow_upward
0
arrow_downward

Можете също така да извикате .resize() за всеки елемент родител/предшественик на календара - когато знаете, че календарът е видим;)

person Kelley van Evert    schedule 09.12.2011

arrow_upward
0
arrow_downward

Надстроих fullcalendar.min.js до най-новата версия (3.9.0) и работи за мен.

person sjsc    schedule 31.05.2018

arrow_upward
0
arrow_downward

имах подобен проблем, използвайки easyappointments проект, решението беше да извикам fullCalendar('render' ), в рамките на функция за обратно извикване, след като се покаже следващият div на съветника:

JQuery код:

 // Display the next step tab (uses jquery animation effect).
        var nextTabIndex = parseInt($(this).attr('data-step_index')) + 1;
  $('#button-next-1').click(function () {

         $(this).parents().eq(1).hide('fade', function () {
                 /* some code */
             $('#wizard-frame-' + nextTabIndex).show('fade');
              $('#calendar').fullCalendar('render');
         });
    });

HTML код:

           <div id="wizard-frame-1" class="wizard-frame">

                 <div class="frame-container"  style="margin-top: 20px!important">/*some code*/</div>




                <div class="modal-footer fixedFooter p-l-10 p-r-10">
                           <button type="button" id="button-next-1" class="btn button-next btn-primary"
                            data-step_index="1">
                                     <?= lang('next') ?>
                                      <span class="glyphicon glyphicon-forward"></span>
                            </button>
                </div>

            </div>
person A.HADDAD    schedule 22.11.2019

arrow_upward
-3
arrow_downward

пробвал ли си display:hidden вместо display:none?

Нямам представа дали ще проработи, но нещо си струва да опитате.

person Steve    schedule 03.11.2010
comment
Мисля, че имаш предвид visiblity: hidden; - това проработи за мен с абсолютна позиция. Всъщност без това fullCalendar('render') изобщо не работеше. Малко мръсно, но... $('#calendar').css({ position: 'relative', visibility: 'visible' }).fullCalendar('render'); - person Richard Hedges; 31.07.2014