How to render a FullCalendar 2.9.0 instance at full height?

Question

I want to load a remote ICS feed into Fullcalendar. However, since it's not natively possible, I use fc-remote-ical.

But fc-remote-ical is old and uses fullcalendar.js version 2.9.0, which does not offer an easy full-height option, like the more recent versions.

Can anybody suggest the appropriate CSS/JS I could add to this demo so that it behaves like the full-height example of Fullcalendar?

Thanks for any tips!

Answer 1

Try these CSS rules. They worked for me on your example.

• #calendar has a max-width of 900px, so reset that to 100%.
• .fc-scroller.fc-day-grid-container has a width set at 649px, so overwrite that.
• .fc-day-grid.fc-unselectable needs a set height to extend to the page
• .fc-basic-view .fc-body .fc-row has a few explicitly set heights. The calendar may likely always have 6 rows, so that is why I divided it by six. If there was only going to be five rows, you might need to use JS to add a class to that table that specifies the height of these.

// controls width
#calendar {
    width: 100%;
    max-width: 100%;
}

// controls height
.fc-scroller.fc-day-grid-container {
    height: 89vh!important; // tweak this value to suit your needs
    overflow: hidden; // optional
}
.fc-scroller > .fc-day-grid, .fc-scroller > .fc-time-grid {
    height: 100vh!important;
}
.fc-day-grid.fc-unselectable {
    height: 100%!important;

// controls the height of each row
.fc-basic-view .fc-body .fc-row {
    min-height: 4em;
    height: calc(100% / 6) !important;
}