How to change default height of row elements in FullCalendar day view(agenda)? Need CSS class or Javascript function. Refer to screenshot for details-
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.
As said before fullcalendar is responsive by nature. So if you speak about to be responsive like month after weeks after day.
We can get start date by getView event with intervalStart. We can get end date by getView event with intervalEnd. var month = $('#calendar'). fullCalendar('getView').
What is Fullcalendar? FullCalendar is a JavaScript library that seamlessly integrates with such popular JavaScript frameworks as Vue, React, Angular. Thanks to its excellent documentation, one won't have trouble incorporating the library into projects.
If you want to change the height of each 30-minute block, you should use the following CSS and adjust the height as you need. The default value is 2.5em.
.fc-time-grid .fc-slats td {
height: 2.5em;
}
Take a look at a working jsfiddle.
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