Fullcalendar fixed line height

Question

How to set fixed line height in fullcalendar? I want to have a vertical scrollbar if there are too many events.

$('#calendar').fullCalendar('option', 'contentHeight', 50); 

Answer 1

If you want to change the height of each row of time intervals, you can override the css class.

 .fc-agenda-slots td div { height: 40px !important; } 

If you mean anything else, let us know.

ContentHeight is used to calculate only the height of the calendar.

Answer 2

it only worked for me

 .fc-agendaWeek-view tr { height: 40px; } .fc-agendaDay-view tr { height: 40px; } 

Answer 3

In my script, I wanted to make the lines smaller, but you can use the same code to make them larger. When the number of rows is less, I had to combine every 4 cells (when working in 15-minute granularity) of the first column to make an indication of the hour in the cell. Use the following code to merge cells:

 $(function(){ // Merge first column, each 4 rows to display time in larger format $('table.fc-agenda-slots tbody tr:not(.fc-minor)').each(function(){ $(this).find("th:first-child").css("font-size", "12px").attr('rowSpan',4); // $(this).nextUntil("tr:not(.fc-minor)","tr.fc-minor").find("th:first-child").remove(); }); }) 

Then use CSS to apply the right row height. Please note that I have added the line-height style that I need for bootstrap compatibility. I also made sure that when dragging outside the calendar, the default behavior is not applied.

  body { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; } .fc-agenda-slots td div { height: 6px; line-height: 6px; } .fc-agenda-axis { font-size:1px; line-height: 1px; }