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 fc-event div to 12px, but I need it to be 20px:

<div class="fc-event fc-event-skin fc-event-vert fc-corner-top fc-corner-bottom" 
style="position: absolute; z-index: 8; top: 314px; left: 441px; 
background-color: green; color: white; 
width: 112.94999999999999px; height: 12px;  ">

Is it possible to set the height of the fc-event div?

Answer 1

e.g.

.fc-event { height: 2em; }

Answer 2

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

height: 50px !important;

Cheers!

Answer 3

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

Answer 4

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 5

try this

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

Answer 6

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