Using FullCalendar how can I adjust the height of the fc-event div?

Question

I am using FullCalendar to display some events, but it is clipping the name of the event in week and day mode.

It appears fullcalendar is setting the height of the f

Answer 1

My solution is more of a work-around for the issue than an actual solution. When setting the events, add \r\n in the title attribute to space it out a bit more.

I spent a bit of time going through the js file to try and adjust how the height is calculated, but due to the switching of views, it got a bit messy.

This will increase the height of the event without messing around with the positioning/css.

Answer 2

in your fullcalendar.min.js change the defaultTimedEventDuration: "00:15:00" to whatever the time you required.

Answer 3

e.g.

.fc-event { height: 2em; }

Answer 4

I simply figured it out. Just put the important rule in fullcalendar.css

height: 50px !important;

Cheers!

Answer 5

try this

.fc-time-grid .fc-slats td {
        height: 20px !important;
}

Answer 6

It may work if you go into the fullcalendar.css and change the heights.