how can I auto fit FullCalendar into a specified div space

Question

I want to fit fullCalendar into a specified div space giving it a fluid effect but find it hard to do. I even tried using the aspect ratio but not getting any luck.... below is what I did so far

    $(window).resize(function() {
    var ratio = $(window).width()/$(window).height();
    $('.resize').html('<div>ratio:'+ratio+'</div>');
    calendar.fullCalendar('option', 'aspectRatio', ratio);
});

Answer 1

Adjusting dynamically the height instead of the aspect ratio worked for me:

Asigning the calendar to a variable when initiating:

calendar = $('#calendar').fullCalendar({
    height: $(window).height()*0.83,
    ...
});

And then adjusting height dynamically (after checking that calendar exists already in order to avoid initial error messages):

if(calendar) {
  $(window).resize(function() {
    var calHeight = $(window).height()*0.83;
    $('#calendar').fullCalendar('option', 'height', calHeight);
  });
};

The factor *0.83 depends on your page-design.

Hope this helps.

Answer 2

you'll need to set the height property dynamically: http://arshaw.com/fullcalendar/docs/display/height/