Fullcalendar: shrink/expand calendar height

问题

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.

回答1:

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

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

回答2:

I found an unperfect way to "shrink" FullCalendar... It seems to be to only way.

Using CSS zoom property, it give a nice result in Chrome 60, Opera 47 and IE 11 (surprisingly! For once.)... But sadly, it just do not respond at all in FireFox 55.

MDN cross-browser compatibility table in the zoom page is quite out of date... That's why I mention the browsers I tested. Maybe some SO users could tell about Safari and other browsers... Mobiles, etc.

So, I think that is your better option... Or live with a scrollbar (which could be improve with CSS).

In this CodePen, you can toggle a class to zoom the calendar between 100% and 75%.