JQuery fullcalendar: Unable to set height for agendaWeek or agendaDay mode

Question

I try to set height for the agendaWeek view in fullCalendar. The final aim is to fit the calendar to user's window, and have the fullcalendar use the max available place with no scrollbar.

The fact is that the documentation shows about height or contentHeight option, but this has no impact on the calculated height in agendaWeek or agendaDay view.

Here is an example jsfiddle

var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

$('#calendar').fullCalendar({
    defaultView: "agendaWeek",
    height: 2500,
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    editable: true,
    events: [
        {
            title: 'All Day Event',
            start: new Date(y, m, 1)
        },
        {
            title: 'Long Event',
            start: new Date(y, m, d-5),
            end: new Date(y, m, d-2)
        },
        {
            id: 999,
            title: 'Repeating Event',
            start: new Date(y, m, d-3, 16, 0),
            allDay: false
        },
        {
            id: 999,
            title: 'Repeating Event',
            start: new Date(y, m, d+4, 16, 0),
            allDay: false
        },
        {
            title: 'Meeting',
            start: new Date(y, m, d, 10, 30),
            allDay: false
        },
        {
            title: 'Lunch',
            start: new Date(y, m, d, 12, 0),
            end: new Date(y, m, d, 14, 0),
            allDay: false
        },
        {
            title: 'Birthday Party',
            start: new Date(y, m, d+1, 19, 0),
            end: new Date(y, m, d+1, 22, 30),
            allDay: false
        },
        {
            title: 'Click for Google',
            start: new Date(y, m, 28),
            end: new Date(y, m, 29),
            url: 'http://google.com/'
        }
    ]
});

I tried to understand how jquery.fullcalendar sets height in these modes but couldn't find a solution. I also tried to force height via CSS dynamically adjusted like

var view = $("#calendar").fullCalendar("getView");
if(view.name == 'agendaWeek' || view.name == 'agendaDay')
    $("table.fc-agenda-slots td > div").height(Math.floor((toHeight-50)/24)-1);

but it causes bugs when switching views (a scrollbar appears on some switchs)

Do you have an idea ?

Answer 1

Ok, I found a workaround thanks to other problem reported such as this one

I load fullCalendar in agendaWeek view by default, then resize width in viewRender option with a basic

$("#calendar").width(myWidth);

The column width is wrong and I need to execute this once

$("#calendar").fullCalendar("render");

Then I resize the height with a 'dirty'

$("table.fc-agenda-slots td > div").height(Math.floor((toHeight-50)/24)-1);

where toHeight is the available height for calendar, 50 the approx of calendar header, 24 number of rows I display in my agenda view and 1 a adjustment

At this point, a scrollbar shows up in agenda views so I apply the trick by Sinetheta (cf link above), I chose to apply it like that :

view.setHeight(9999);

The trick causes problem with month view so the entire trick looks like this

var view = $("#calendar").fullCalendar("getView");
if(view.name == 'agendaWeek' || view.name == 'agendaDay')
{
    $("table.fc-agenda-slots td > div").height(Math.floor((toHeight-50)/24)-1); // 50: approx header height, 24: number of rows in agenda view (I only display from 7am to 19pm)
    view.setHeight(9999); // Get rid of scrollbar
}
if(view.name == 'month')
{
    $("tr.fc-week td > div").css("min-height", "");
    $("tr.fc-week td > div").height(Math.floor((toHeight-50)/6)-1); // 50: approx header height, 6: number of rows in month view
}

I find the trick a bit ugly and I guess it can be improved by getting the real header height and number of rows, but anyway it works

Note: this trick is included in a calendarResize function I execute in viewRender function within fullCalendar