FullCalendar v6 (React) dayGridMonth: either multi-day allDay events don’t span

I’m using FullCalendar v6 in a React + TypeScript app with dayGridMonth. I need the month grid to show all events always visible (no “+more”), and allow the week row height to grow to fit the maximum number of events in that week (like FullCalendar used in WordPress).

However I’m stuck in a “trade-off”:

If I tweak CSS to prevent week overlap and let the grid grow, multi-day allDay events stop spanning horizontally and appear only as short blocks on the first day of each week segment (e.g. only on Feb 1 and Feb 8, but not filling the days between).

If I revert CSS to restore correct spanning, weeks overlap / a whole week row becomes hidden (the next week’s day numbers disappear), as if event segments are positioned on top of each other.

I suspect it’s caused by CSS overrides applied to .fc-daygrid-event-harness which also affects .fc-daygrid-event-harness-abs (because the abs harness element contains both classes). The abs harness uses inline top/left/right calculations; when I override those (even indirectly), layout breaks.

Requirements dayGridMonth

No “+more” — all events must stay visible (week height can grow)

Multi-day allDay events must span continuously across days (split into week segments correctly)

No week overlap (weeks must not cover each other)

Environment React 18 + TypeScript

@fullcalendar/react + @fullcalendar/daygrid + @fullcalendar/interaction

TailwindCSS (but I’m not applying Tailwind classes directly to events except category classes)

FullCalendar options: height: "auto", fixedWeekCount: false

Minimal reproducible example React component

import FullCalendar from "@fullcalendar/react"; import dayGridPlugin from "@fullcalendar/daygrid"; import interactionPlugin from "@fullcalendar/interaction"; const events = [ // 5 all-day events starting same day, spanning over a week boundary { id: "1", title: "Event 1", start: "2026-02-01", end: "2026-02-10", allDay: true }, { id: "2", title: "Event 2", start: "2026-02-01", end: "2026-02-10", allDay: true }, { id: "3", title: "Event 3", start: "2026-02-01", end: "2026-02-10", allDay: true }, { id: "4", title: "Event 4", start: "2026-02-01", end: "2026-02-10", allDay: true }, { id: "5", title: "Event 5", start: "2026-02-01", end: "2026-02-10", allDay: true } ]; export default function Calendar() { return ( <div style={{ width: "100%" }}> <FullCalendar plugins={[dayGridPlugin, interactionPlugin]} initialView="dayGridMonth" headerToolbar={false} fixedWeekCount={false} height="auto" events={events} eventDisplay="auto" displayEventTime={false} displayEventEnd={false} // IMPORTANT: I do NOT want +more, so I am NOT using: // dayMaxEvents / dayMaxEventRows /> </div> ); }

CSS overrides (this is where the bug happens)

When I add week auto-height rules and try to avoid overlap, I used something like:

css /* allow week rows to grow */ .fc .fc-scrollgrid-sync-table { height: auto !important; } .fc .fc-scrollgrid-sync-table tbody tr { height: auto !important; } .fc .fc-daygrid-day-frame { height: auto !important; min-height: 120px; } /* I previously tried overriding the harness to keep it in flow: */ .fc .fc-daygrid-event-harness { position: relative !important; top: auto !important; left: auto !important; right: auto !important; }

This prevents week overlap, but then multi-day events don’t span correctly (they only show on the week start).

If I remove/relax the harness override, spanning comes back, but sometimes I get week overlap / next week row hidden.

What I tried Correct exclusive end dates for all-day events (end = last visible day + 1).

No eventContent custom rendering (native FullCalendar rendering).

Removing dayMaxEvents / dayMaxEventRows (I want everything visible).

Removing layout wrappers with overflow-hidden / overflow-auto in parent containers.

Multiple CSS experiments around .fc-daygrid-day-frame, .fc-scrollgrid-sync-table, and harnesses.

Question What is the correct way (FullCalendar options + safe CSS) to achieve:

All events visible (no “+more”, week rows can grow)

Correct multi-day spanning (continuous bar across days / week segments)

No week overlap (no hidden week rows)

Specifically:

Which CSS selectors should never be overridden (e.g. .fc-daygrid-event-harness-abs, top/left/right)?

Is there a recommended configuration for auto-height month grid with many all-day multi-day events, without using dayMaxEvents?