resourceGroupingLayout: a multi-day all-day event is missing from the days between its start and end

Author: Poky85Created Sep 9, 2026Updated Sep 9, 2026

Describe the bug

With resourceGroupingLayout enabled, a multi-day all-day event is rendered only on the day it starts and the day it ends. Every day in between omits it, even though the event spans them.

TimeGridHeaderResources filters the all-day events of each day by comparing the event boundaries to that day:

javascript
// src/TimeGridHeaderResources.js
const filteredEvents = (groupedEvents.get(id) || []).filter(
  (event) =>
    localizer.isSameDate(event.start, date) ||
    localizer.isSameDate(event.end, date)
)

isSameDate is an equality test, so a Monday–Friday event matches only Monday and Friday. The rest of the calendar selects all-day events by overlap instead — TimeGrid, Month and Agenda all go through inRange from utils/eventLevels, which delegates to localizer.inEventRange.

The default header (TimeGridHeader) is unaffected: it hands the whole range to DateContentRow and the overlap is resolved downstream.

To Reproduce

  1. Render a week view with two or more resources and resourceGroupingLayout.
  2. Add an all-day event from Monday to Friday on one of the resources.
  3. Look at the all-day row of Tuesday, Wednesday and Thursday.

Expected behavior

The event is shown on every day it spans, the same as in the default header.

Actual behavior

It is shown on Monday and Friday only.

Additional context

A second, smaller difference between the two headers sits a few lines above: TimeGridHeader renders the resource name row as rbc-row rbc-row-resource, while TimeGridHeaderResources renders a bare rbc-row. The stylesheet targets the modifier (.rbc-time-header-content > .rbc-row.rbc-row-resource in sass/time-grid.scss), so the row loses its bottom border and flex-shrink: 0 in the grouping header.

Version: 1.20.0.

I have a fix for both with tests and will open a PR against this issue.

Source: bigcalendar/react-big-calendar