Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change default row height in fullcalendar day view?

How to change default height of row elements in FullCalendar day view(agenda)? Need CSS class or Javascript function. Refer to screenshot for details- enter image description here

enter image description here

enter image description here

enter image description here

like image 486
nickalchemist Avatar asked Feb 20 '15 08:02

nickalchemist


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.

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.

How do I start and end date in FullCalendar?

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 the use of FullCalendar?

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.


1 Answers

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.

like image 72
Luís Cruz Avatar answered Oct 15 '22 09:10

Luís Cruz