Reputation: 1126

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

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?

Upvotes: 3

Answers (6)

Ghost Rider

Reputation: 161

try this

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

Upvotes: 0

rajitha g

Reputation: 11

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

Upvotes: -1

tossweee

Reputation: 51

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

height: 50px !important;

Cheers!

Upvotes: 5

Chris

Reputation: 11

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.

Upvotes: 1