10
Views
5
Comments
  FullCalendar Reactive - Custom height of event


By default FullCalendar plugin set event height = 19px. In my case, I want a custom event height dynamically for that I can show a long description 

Now there is a problem because the event height has changed so Fullcalendar has calculated incorrectly. In the image below the events are overlapping instead of being arranged sequentially.

Anyone who has encountered the same problem can give me some advice. I tried using js to customize the event spacing, but it is hard to be precise because each event has different height.

Thanks for reading.


2026-01-28 16-57-48
Mihai Melencu
Champion

Hi @Man Luong ,

I haven’t tested it with the description displayed in the event yet, but I disabled the no-wrap and flex on the event title and time, then set the height to 100%. This is the result I got: 

In my case I only edited added this CSS class:

  • .fc fc-event {   
  • height: 100% !important
  • ;}
UserImage.jpg
Man Luong

Hi @Mihai Melencu, thanks for your answer.  I increased the height of the event.

My problem is that when displaying events they overlap

instead it should show like this


2026-01-28 16-57-48
Mihai Melencu
Champion

You can turn off event overlap by editing the fullcalendar configuration. You can do that by adding this line in the AdvancedOptions property of the fullcalendar:

slotEventOverlap: false


UserImage.jpg
Man Luong

Hi @Mihai Melencu , thanks for your answer

slotEventOverlap: false  => I know this option and turn off it. I have problem because I have adjusted the height of event

Default event height = 19px, Fullcalendar will render margin-top: 19px & top:19px


For show events correct margin-top & top should be = 37px

 


2026-01-28 16-57-48
Mihai Melencu
Champion

Could you share a sample OML? It’s difficult to address the issue without seeing the actual use case. 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.