I have a calendar that was customized and working with FullCalendar version 1. Now, I've updated it to version 3. I've updated the CSS and settings to match what I had before, but cannot find a way to adjust the day height in the month view.
On the left is the old display and on the right is the new display, where the day cells are too tall.
I would do it in CSS, but the height of the week is dynamically set by the code so should be adjustable.
The old version resulted in this:
and the new version results in this:
How do I tell the code what I want?
If "auto" is specified, the view's contents will assume a natural height and no scrollbars will be used. If "100%" is specified, the height of the calendar will match the height of its parent container element. See an example. Any other valid CSS value is accepted as well.
fullCalendar( 'changeView', 'basicDay' ); Is actually all you need. The #calendar selector is the container you initially called fullCalendar on, the 'changeView' parameter is the function that's being called and the basicDay parameter is the view, which can be any of the views that fullCalendar provides.
It is possible to change the look of the calendar (colors, fonts, etc) by applying a theme. Renders the calendar with a given theme system. In order to correctly theme your calendar with a Bootstrap 5 theme, you must include the correct stylesheets, include the JavaScript plugin, and set themeSystem to 'bootstrap5'.
As said before fullcalendar is responsive by nature. So if you speak about to be responsive like month after weeks after day.
Solved. Turned out to require two settings.
In the CCS, make the min-height
smaller:
.fc-body .fc-row { min-height: 45px; }
And in code, change the aspectRatio to a new 'magic' number:
.fullCalendar({
aspectRatio: 1.09
});
Changing the aspectRatio
without first reducing the min-height
does not result in a height less than the min-height
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With