How to make jQuery FullCalendar's height fit its content?

Question

I want to get rid of the scrollbars in the calendar's div in the agenda views (week and day) and only use browser's scrollbar if the calendar's content does not fit the browsers viewport.

So I believe I need to adjust the calendar's height to make its contents fit. How can I achieve that?

Answer 1

From the version 2.1.0, you can use height or contentHeight options and set their value to auto.

The height option refers to entire calendar's height (including header). The contentHeight option refers to calendar's content area height.

According to plugin's docs, a value of auto means that the view's contents will assume a natural height and no scrollbars will be used.

Initialize the calendar as follows:

$('#calendar').fullCalendar({
    contentHeight: "auto",
    // .... other options here 
});

Fiddle here: https://jsfiddle.net/yj90oqzf/

More info here:

• https://fullcalendar.io/docs/display/height/
• https://fullcalendar.io/docs/display/contentHeight/

Answer 2

There's a getView method which returns current active View. And this View has its own method setHeight, so you can create a function like this:

function resizeCalendar(calendarView) {
    if(calendarView.name === 'agendaWeek' || calendarView.name === 'agendaDay') {
        // if height is too big for these views, then scrollbars will be hidden
        calendarView.setHeight(9999);
    }
}

And call it when view changed:

$('#calendar').fullCalendar({
    viewDisplay: resizeCalendar,
    ...
});

Working JSFiddle