CODEWITHSUNDEEP
fullcalendar
gormit
gormit

Reputation: 807

fullcalendar fixed height of row

How do I set fixed height of row in fullcalendar? I want to have vertical scrollbar, if there are too many events.

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

Upvotes: 11

Views: 38721

Answers (3)

Jaxx0rr
Jaxx0rr

Reputation: 595

for me only this worked

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

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

Upvotes: 16

Cor
Cor

Reputation: 21

In my script I wanted to make the rows smaller, but you can use the same code to make them bigger. When making the rows smaller, I had to merge each 4 cells (when working in 15 minutes granularity) of the first column to make the hour indication fit in the cell. Use the following code to merge the 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. Note that I added line-height styling, which I needed for compatibility with bootstrap. I also made sure that when dragging outside of the calendar, the default selection behavior does not apply.

        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;
        }

Upvotes: 2

Pitchai P
Pitchai P

Reputation: 1317

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

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

If you mean something else, please let us know.

The contentHeight is used to calculate only the calendar's height.

Upvotes: 11

Related Questions