Fullcalendar: shrink/expand calendar height

Question

This is the calendar I have, however, I'd like for it to be shrunk down a bit. When I do this with the following command I get a truncated schedule instead of a compressed one. Take a look:

$('#calendar').fullCalendar('option', 'height', 200);
                       ---OR WITH---
$('#calendar').fullCalendar('option', 'contentHeight', 200);

Calendar before resizing with the above command:

Calendar after trying to resize:

You can see a scrollbar has appeared and some events are no longer present (until I scroll). I have played around with CSS to try resizing it manually (notably with the .fc-slats > table height and #calendar font-size) but these are very hard to work with and create misplaced events when changed dynamically. I need to be able to vertically shrink/expand the calendar dynamically, preferably using JQuery. How can this be achieved?

Thanks in advance.

I´m trying to shrink progressively my calendar scheduler height too when user clicks a button. Is there a way to do this like applying css zoom: 0.75; but not using that? — Jorge Antequera
I've given up on my scheduling application as it was taken over by someone else. I wasn't able to find a good way of fixing this issue reliably. Please post a solution if you find a way, maybe the code base has evolved a bit. — Max Smith

Wisely D Cruizer Wisely D Cruizer · Accepted Answer · 2017-09-08T05:18:33

Just add this css to the page you have your calender "DIV"

.fc-time-grid .fc-slats td {
  height: 1em;  /* Edit as required */
}

Fullcalendar: shrink/expand calendar height

2 Answers