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?

回答1:

e.g.

.fc-event { height: 2em; }

回答2:

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

height: 50px !important;

Cheers!

回答3:

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

回答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.

回答5:

try this

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

回答6:

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

来源：https://stackoverflow.com/questions/7990300/using-fullcalendar-how-can-i-adjust-the-height-of-the-fc-event-div

标签

fullcalendar