captainrad captainrad - 1 year ago 334
Javascript Question

fullcalendar - resize calendar on window resize

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 Source

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
            height: get_calendar_height

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