Background events

An event with display: 'background' shades its time under the other events instead of being laid out as one. Use it for dated items from your data, such as a holiday or a booked-out afternoon. For rules such as business hours, use background layers.

export const closures = [
  createEvent({
    id: 'holiday',
    kind: 'allDay',
    display: 'background',
    start: Temporal.PlainDate.from('2026-03-17'),
    data: { title: 'Holiday' },
  }),
  createEvent({
    id: 'maintenance',
    kind: 'timed',
    display: 'background',
    start: Temporal.ZonedDateTime.from(`2026-03-11T12:00[${timeZone}]`),
    end: Temporal.ZonedDateTime.from(`2026-03-11T13:00[${timeZone}]`),
    resourceIds: ['room-a'],
    data: { title: 'Maintenance' },
  }),
];

Background events go in events with the rest, so they share the id space, the event store and TData.

• They take no lane or row, skip eventOrder, and never count toward maxEventsPerDay.
• The core leaves them out of every event list it hands out: day.events, bar segments, timed segments and list days. Your own code that reads the events input, such as a search box or a count, filters on display.
• Without resourceIds, a background event shades every resource column or timeline row. A normal event appears only in the resources it names.

PartsCopy Anchor Link

Each renders an aria-hidden div with data-continues-before and data-continues-after. They aren't interactive: base.css passes clicks through to the day triggers and events. Render them before the bars and events, because grid items paint in DOM order. The week and day-grid examples render them.

ModelCopy Anchor Link

Every entry also has continuesBefore and continuesAfter, as bars do. A timed background event doesn't tint a day-grid cell, since part of a day would read as the whole day.