Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adjust day height in fullcalendar?

Tags:

fullcalendar

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.

enter image description here

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:

enter image description here

and the new version results in this:

enter image description here

How do I tell the code what I want?

like image 580
Glen Little Avatar asked Nov 30 '16 19:11

Glen Little


People also ask

How do I change the height on fullCalendar?

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.

How do I change the view in fullCalendar?

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.

How do I change my fullCalendar theme?

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'.

Is full calendar responsive?

As said before fullcalendar is responsive by nature. So if you speak about to be responsive like month after weeks after day.


1 Answers

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.

like image 74
Glen Little Avatar answered Sep 23 '22 01:09

Glen Little