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

Question

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

Answer 1

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>

Answer 2

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

Answer 3

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.

Answer 4

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