full calendar not displaying when loaded (with backbone)

Question

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?

Answer 1

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.