FullCalendar view not showing on load

Question

I am using FullCalendar for a new site I working on. I have two divs with calendars attached. The first loads as expected...no issues. The second is the problem. It loads the header with buttons and title, but the view div is empty. I checked for errors, and none were thrown. If I click on the any header button the view is displayed as expected. I thought maybe it was a conflict between the two calendars, and it doesn't seem to be the issue. See the code below, and let me know your thoughts. I am using a Parse backend, which seems to be working just fine, and jQuery. Events call the same function for loading events and it also is working properly.

First calendar code:

       $('#calendar').fullCalendar({    
            timezone: 'local',
            events: function( start, end, timezone, callback ) {        
                callback(getEvents(events, start, end));
            },
            color: 'lightBlue',
            textColor: 'gray',
            eventMouseover: function( calEvent, jsEvent, view ) {
                var $target = $(jsEvent.target).css('cursor', 'pointer');
                var location = userData.locations[calEvent.location.id];
                var event = userData.events[calEvent.eventData.id];
                var options = {
                    items: $target.parent(),
                    content: function() {
                        var info = "Event: <b>" + calEvent.title + "</b><br/><center>" + calEvent.description + "</center><br/>Date: " + moment(calEvent.start).format("MM/DD/YYYY h:mma - ") + moment(calEvent.end).format("h:mma") + '<br/>Frequency: ' + event.get('eventFrequency') + '<br/> Frequency End Date: ' + moment(event.get('eventEndDate')).format('MM/DD/YY') + '<br/>Location: <center>' + location.get("locationName") + '<br/>' + location.get('locationAddress') + location.get('locationAddress2') + "<br>" + location.get('locationCity') + ', ' + location.get('locationState') + ' ' + location.get('locationCountry') + ' ' + location.get('locationPostalCode') + "</center><br/><center>Click Event to Edit";
                        return info;
                    }
                };
                $(view.el).tooltip(options);
            },
            eventMouseout: function( calEvent, jsEvent, view ) {
                $(view.el).tooltip('destroy');
            },
            eventClick: function(calEvent, jsEvent, view) {
                console.log(calEvent);
                console.log(jsEvent);
                console.log(view);
                userData.currentLocation = {};
                var location = userData.currentLocation['location'] = userData.locations[calEvent.location.id];
                var query = new Parse.Query('Event');
                query.equalTo('user', currentUser);
                query.equalTo('parent', location);
                query.find().then(function(events) {
                    userData.currentLocation.events = events;   
                    addRow(calEvent.eventData);
                    $('#add-location').text('Back to Calender').off().one('click',showCalendar);
                }, function(error) {
                    errorMessage(error);
                });
            },
            header: {
                left:   'title',
                center: '',
                right:  'today prev,next'
            },
            buttonIcons: {
                prev: 'left-single-arrow',
                next: 'right-single-arrow',
            },
            dayClick: function(date, jsEvent, view) {

            }
         });

Screenshot on load...works perfectly.

Second calendar...not so much. Here's the code:

    $('#kp-agenda-view').fullCalendar({
            header: {
                left:   'prev,next today',
                center: 'title',
                right:  'month,agendaWeek,agendaDay'
            },
            defaultDate: '05-05-2015',
            allDay: false,
            color: 'lightBlue',
            textColor: 'gray',
            timezone: 'local',
            overlap: false,
            editable: true,
            buttonIcons: {
                prev: 'left-single-arrow',
                next: 'right-single-arrow',
            },
            events: function(start, end, timezone, callback) {
                callback(getEvents(userData.currentLocation.events, start, end));
            },
        })

After clicking any header button (I clicked 'today')...the view is loaded

Not really sure what's going on, and I can't seem to find any similar entries on the web. Thanks in advance, and let me know if more information is needed.

Answer 1

I know this is a bit too late but take a look at this question: FullCalendar Within Twitter Bootstrap Tabs It seems that the fullcalendar won't load if it is in an element that is not displayed. If this is the case the simple 'shotgun' solution is to force rendering via

$('#kp-agenda-view').fullCalendar('render');

when the calendar gets displayed.

Answer 2

I had exactly the same issue when i saw this post. The solution above, which means to invocate the render, don't worked for me.

The only way that i found to make this work was turn, in my case, the div invisible where the calendar was placed, into visible, before the original render of the calendar and then, make invisible again.

Answer 3

What we did, is copy all the code for the first Calendar, and pasted that code below the original code, and renamed all Calendar references to Calendar2. This includes the div for the second calendar on the same page.

Some JS:

// Calendar 2 beginning
    var calendarioDiv2 = $('#calendar2');
    var fullCalendar = calendarioDiv2.fullCalendar({......)}

//last lines fo JS

$(window).on('load', function() {
    $('#calendar').fullCalendar('render');
    $('#calendar2').fullCalendar('render');
  });