CODEWITHSUNDEEP
jqueryhtmlparse-platformfullcalendar
Jusmark123
Jusmark123

Reputation: 213

FullCalendar view not showing on load

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.

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));
            },
        })

View Not Loaded

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

View Loaded after clicking a header button

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.

Upvotes: 9

Views: 16052

Answers (10)

Alex Calderon
Alex Calderon

Reputation: 1

This worked for me.

replace:

calendar.render();

with:

setTimeout(function () {
  calendar.render();
}, 2000);

Upvotes: 0

Ashish Tripathi
Ashish Tripathi

Reputation: 666

In my case, the view that was containing calendar div was dynamically added using ajax and jQuery. And the calendar (FullCalendar) was not loading/ rendering for the first time.

But, when I was doing inspect the element, it was immediately rendered.

I used setTimeOut and it worked. The working code is as below.

<script type="text/javascript">

$(function () {
    //Until the data was not rendered. I was showing a loader to engage the users. Just you need to change the image path
    showLoader("#lxgEventsCalendar");

    //Creating a delay of 500 ms
    setTimeout(function () {
        loadFullCalData();
    }, 500);

});

function loadFullCalData() {
    var calendarEl = document.getElementById('lxgEventsCalendar');

    var calEvents = [
        {
            title: 'All Day Event',
            start: '2021-11-01'
        },
        {
            title: 'Long Event',
            start: '2021-11-07',
            end: '2020-11-10'
        },
        {
            groupId: '999',
            title: 'Repeating Event',
            start: '2021-11-09T16:00:00'
        },
        {
            groupId: '1',
            title: 'Meetings with Share Holders',
            start: '2021-11-14T16:00:00'
        },
        {
            groupId: '2',
            title: 'Meeting with Sam & Co',
            start: '2021-11-15T16:00:00'
        },
        {
            groupId: '3',
            title: 'Meeting with MDT Polymers',
            start: '2021-11-19T16:00:00'
        }];

    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        headerToolbar: {

            center: 'title',
            start: 'today prev,next',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
        },

        dateClick: function (info) {

            var markup = "<div class=\"form-horizontal\"><div class=\"form-group\"><label class=\"control-label col-lg-3\">Date Selected</label> <div class=\"col-lg-6\">" + info.dateStr + "</div> </div></div>";
            showAlert(info.dateStr);
        },
        events: calEvents
    });

    calendar.render();
}

function showLoader(divSelector) {
       var loaderMarkup = "<div id='imgLoader' class='loader-img' style='width: 100%;margin: 0px auto 0px auto; padding: 10px 0; text-align:center;overflow: hidde;'><img style='margin: 0px auto 0px auto;' src='../../images/waiting_animation_circle.gif'/></div>";


    $(divSelector).html(loaderMarkup);
}

</script>


<div id='lxgEventsCalendar' class="col-lg-12"></div>

Upvotes: 0

Helan Thomas
Helan Thomas

Reputation: 1

var calendarEl = document.getElementById('calendar');
    var calendar = new Calendar(calendarEl, {  height: 300,
      plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid' ],
      header    : {
        left  : 'prev,next today',
        center: 'title',
        right : 'dayGridMonth'
      },

I just give a height then my issue is solved.

Upvotes: 0

Vivekanand Panda
Vivekanand Panda

Reputation: 877

Working of me

setTimeout(() => {
  $('#kp-agenda-view').fullCalendar('render');
}, 1000)

Upvotes: 1

Alexis Mansilla
Alexis Mansilla

Reputation: 11

A little workaround, before call fullCalendar method

    setTimeout(function () {
      $('#kp-agenda-view').fullCalendar('render');
    });

it is working for me.

Upvotes: 1

Krishna J
Krishna J

Reputation: 1

Had the same issue. (In my case calendar was placed in invisible div) Solution: Before rendering the calendar, show the calendar. And hide calendar once calendar renders.

Upvotes: 0

Aleksandar Trposki
Aleksandar Trposki

Reputation: 156

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.

Upvotes: 8

deb
deb

Reputation: 11

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

Upvotes: 1

xphoenyx
xphoenyx

Reputation: 1

Had the same issue. My problem was in tab container rendering animation. According to the docs, method fullcalendar.render() tries to render calendar grid in visible container only. So, if you fire fullcalendar.render() immediately after tab click but do have some animation on tab container, where calendar is being rendered (for example "fade in" animation, which obviously takes some time to execute), then be ready to catch tab container without calendar grid.

Or this case, solution will be similar to this:

$("#calendarTab").click(function (e) {
    e.preventDefault();

    setTimeout(function () {
        $("#fullCalendar").fullCalendar("render");
    }, 300); // Set enough time to wait until animation finishes;
});

Upvotes: 0

Leacam
Leacam

Reputation: 11

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.

Upvotes: 1

Related Questions