CODEWITHSUNDEEP
jqueryfullcalendar
Jens Alm
Jens Alm

Reputation: 3057

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

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.

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.

Upvotes: 18

Views: 16386

Answers (10)

A.HADDAD
A.HADDAD

Reputation: 1906

i had a similar issue using easyappointments project, the solution was to call fullCalendar('render') , within a callback function after the next wizard div is showed:

JQuery Code:

 // 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 Code:

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

Upvotes: 0

sjsc
sjsc

Reputation: 4652

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

Upvotes: 0

AntonK
AntonK

Reputation: 1310

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.

The code is as follows:

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

Upvotes: 3

ggez44
ggez44

Reputation: 903

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');

Upvotes: 35

gizmo16
gizmo16

Reputation: 21

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>

Upvotes: 2

la_antorcha
la_antorcha

Reputation: 378

When you click on the tab call something like this:

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

Upvotes: 2

Kelley van Evert
Kelley van Evert

Reputation: 121

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

Upvotes: 0

user527007
user527007

Reputation: 106

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>

Upvotes: 9

Mason Stewart
Mason Stewart

Reputation: 868

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.

Upvotes: 0

Steve
Steve

Reputation: 1402

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

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

Upvotes: -3

Related Questions