fullcalendar - resize calendar on window resize

captainrad picture captainrad · Apr 2, 2012 · Viewed 30.1k times · Source

I am using fullcalendar (fullcalendar by adam shaw)

I am wondering what I would need to do so that my fullcalendar dynamically changes size depending on the size of the browser window? I have looked into his 'render' function a little bit but have been having trouble figuring this out.

(ie, when a user resizes their window I would like fullcalendar to readjust it's width and height to a proper aspect ratio)

Answer

Matija Grcic picture Matija Grcic · Apr 2, 2012

It's all documented.

Let's see, try something along this lines:

//function to calculate window height
function get_calendar_height() {
      return $(window).height() - 30;
}

//attacht resize event to window and set fullcalendar height property
$(document).ready(function() {
    $(window).resize(function() {
        $('#calendar').fullCalendar('option', 'height', get_calendar_height());
    });


    //set fullcalendar height property
    $('#calendar').fullCalendar({   
            //options
            height: get_calendar_height
    });
});

Apply similar to width. Or you could place calendar in div and do manipulations that way.