I am using the jQuery plugin full calendar in conjunction with backbone.js and having an issue where it does not display properly when first loading.

This is my render function for the backbone view containing the calendar:

render: function() {

    var that = this;

    // DEBUG:
    // console.log({entries: data});

    this.$el.html(this.template(this.serialize()));

    this.$('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },

        height: that.$el.parent().height()
    });

            // prints undefined
    console.log(this.$('#calendar').fullCalendar('getView').title);

    window.setTimeout(function() {
        this.$('#calendar').fullCalendar('changeView','agendaWeek');
    }, 500);


    return this;
}

You can see I have a set timeout for 500 ms included. When I delay that 500 ms, and then change the view to agendaWeek, it will display. However, if I do not delay, the calendar does not show. There are no errors printed in either case.

I am at a loss of what to try here or what might be going wrong. Is there a callback for the creation of the calendar that I am missing somewhere in the docs?

Thanks

EDIT: could it be that the .html() funciton isn't complete and causing an issue?

I am using the jQuery plugin full calendar in conjunction with backbone.js and having an issue where it does not display properly when first loading.

This is my render function for the backbone view containing the calendar:

render: function() {

    var that = this;

    // DEBUG:
    // console.log({entries: data});

    this.$el.html(this.template(this.serialize()));

    this.$('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },

        height: that.$el.parent().height()
    });

            // prints undefined
    console.log(this.$('#calendar').fullCalendar('getView').title);

    window.setTimeout(function() {
        this.$('#calendar').fullCalendar('changeView','agendaWeek');
    }, 500);


    return this;
}

You can see I have a set timeout for 500 ms included. When I delay that 500 ms, and then change the view to agendaWeek, it will display. However, if I do not delay, the calendar does not show. There are no errors printed in either case.

I am at a loss of what to try here or what might be going wrong. Is there a callback for the creation of the calendar that I am missing somewhere in the docs?

Thanks

EDIT: could it be that the .html() funciton isn't complete and causing an issue?

• javascript
• jquery
• backbone.js
• fullcalendar

• 3 Does Fullcalendar perhaps care about the size or position of its element? I've come across possibly similar issues with Google Maps and the setTimeout(..., 0) trick worked for me. – mu is too short Commented Aug 12, 2013 at 21:01
• I'm pretty sure the issue is what @muistooshort alluded to. I've used the full calendar plugin and it does care about the "size and position" of it's element. – Jack Commented Aug 12, 2013 at 21:46
• Does the issue remain if you hard code the height? What this.serialize() returns? – john 4d5 Commented Aug 14, 2013 at 0:21
• this.serialize() should perhaps be this.model.toJSON() ? – ekeren Commented Aug 19, 2013 at 9:45

2 Answers 2

I had a similar problem and found this important information in the docs:

http://arshaw.com/fullcalendar/docs/display/render/

My calendar was on a tab currently not selected making the parent container not visible and thus not drawn correctly. Added a call to the render method after selecting the tab and it all worked great.

Your issue might be solved in a similar way.

I am using backbone.js and I too had the same issue.

I was declaring and initializing calendar in OnRender() event.

Later to solve this issue I moved the code for declaring and initializing calendar into an OnShow() event.

Issue:

According to my issue it was because require element was not present on the DOM. OnShow() gets fired when your DOM is completely ready.

Finally it worked for me.