I’m using FullCalendar v6 with a timeGridDay view and slotDuration: ‘00:15:00’. Events are editable and can overlap (slotEventOverlap: true).
I noticed a strange layout issue when I have back-to-back events on the same day — for example:
Event A → 11:45–12:00 Event B → 12:00–12:45 Event C → 12:45–13:00
Even though these events do not actually overlap, FullCalendar renders them as if they do — each one appears half-width, as if it’s sharing the same time slot with another event.
I still need to allow real overlapping events (so slotEventOverlap: true must stay), but I want events that only touch at their boundaries (end == start of next) to be full width.
My calendar options are
this.calendarOptions = {
slotEventOverlap: true,
initialView: 'timeGridDay',
plugins: [timeGridPlugin, interactionPlugin, resourceTimeGridPlugin, resourceTimeline],
allDaySlot: false,
slotDuration: '00:15:00',
slotLabelInterval: '00:30:00',
slotLabelFormat: {
hour: 'numeric',
minute: '2-digit',
omitZeroMinute: false,
meridiem: 'short',
hour12: false,
},
slotMinTime: '07:00:00',
slotMaxTime: '23:00:00',
stickyHeaderDates: false,
headerToolbar: false,
contentHeight: window.innerHeight - 180,
height: window.innerHeight - 180,
expandRows: true,
eventBackgroundColor: '#FFFFFF',
eventBorderColor: '#FFFFFF',
editable: true,
firstDay: 1,
nowIndicator: true,
selectable: true,
}
How can I make all events that are not truly overlapping (within the same day) render at full width,
while keeping real overlapping events stacked side-by-side?
I want to keep slotEventOverlap: true, but visually show:
Back-to-back events → full width
Real overlaps → shared space