resourceGroupingLayout: a multi-day all-day event is missing from the days between its start and end
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:
// 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
- Render a week view with two or more resources and
resourceGroupingLayout. - Add an all-day event from Monday to Friday on one of the resources.
- 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