Parts
Every part, its model prop and its element.
Every part renders one element with data-scope='calendar', a data-part name, state attributes and its geometry as
--cal-* custom properties; custom themes lists them. Parts render your
children, accept any props of their element plus render, and pass ref to their element.
All parts must render inside CalendarProvider or Calendar.
Day grid
| Part | Model prop | Element | Notes |
|---|---|---|---|
DayGridView | model | div | Region labelled "Calendar". Contains sections. |
DayGridViewSection | section | div | role='grid'; emits --cal-columns, data-month, and data-resource-id. |
DayGridViewSectionHeader | none | div | Consumer-supplied month or resource label. |
DayGridViewHeader | none | div | role='row'. |
DayGridViewHeaderCell | column | div | role='columnheader', data-weekday, data-resource-id. |
DayGridViewRow | row | div | role='row'; emits column and stack counts. |
DayGridViewDay | day | div | role='gridcell', data-today, data-outside, data-weekday, data-unavailable, data-resource-id. |
DayGridViewDayTrigger | calendar, day, view | button | Navigates through calendar to view on this date. |
DayGridViewRowEvent | segment | button | A bar across the row's visible columns; data-all-day, data-multi-day. |
DayGridViewRowBackgroundEvent | segment | div | An all-day background span; aria-hidden. |
DayGridViewDayBackground | background | div | A background layer's shading; aria-hidden. |
DayGridViewOverflow | day | button | Renders only when day.hasMore. |
Render each section's header and rows inside DayGridViewSection, and bars inside their row beside its day cells.
The default theme lays sections out in a responsive grid: --calendar-section-min-width (default 20rem) sets the
minimum section width and --calendar-section-gap (default 1rem) the gap. Override them, or style the root's grid,
for another arrangement.
For a year overview, use groupBy: 'month' with fixedWeekCount: true. Calendar-only multi-month grids emit
data-multi-month, and the supplied themes give them compact rows, centered headings and padded month panels.
--calendar-section-gap also sets their spacing (defaults 2rem between columns, 1.5rem between rows). With section
and weekday headers present, CSS subgrid aligns neighboring months' header and week tracks. The root's
--cal-month-rows is the largest section row count. Resource grids and single months keep their usual sizing.
Time grid
| Part | Model prop | Element | Notes |
|---|---|---|---|
TimeGridView | model | div | role='region', labelled "Time grid". Scrolls. |
TimeGridViewHeader | none | div | Sticky column headers. |
TimeGridViewColumnHeader | column | div | data-today, data-weekday, data-unavailable, data-resource-id. |
TimeGridViewColumnTrigger | calendar, column, view | button | Navigates through calendar to view on the column's date. |
TimeGridViewAllDay | none | div | Render it only when allDay is set. |
TimeGridViewAllDayEvent | segment | button | A bar segment; data-all-day, data-multi-day. |
TimeGridViewAllDayBackgroundEvent | segment | div | aria-hidden. Render it before the bars. |
TimeGridViewBody | model | div | Holds the axis and the columns. Emits --cal-slot-units for the grid height. |
TimeGridViewAxis | none | div | Optional. |
TimeGridViewAxisLabel | slot | div | slot is the time slot, not the HTML attribute. Emits --cal-start, --cal-span. |
TimeGridViewColumn | column | div | data-today, data-weekday, data-unavailable. |
TimeGridViewBackgroundEvent | segment | div | aria-hidden. Render it before the events. |
TimeGridViewBackground | background | div | aria-hidden. A background layer's shading. |
TimeGridViewEvent | segment | button | Placed by time and lane; data-overlap when it shares lanes, data-short when isShort. |
TimeGridViewNowIndicator | column | div | aria-hidden. Renders only in today's column. |
Give the root a height, such as max-block-size: 40rem, to scroll inside the page instead of showing all 24 hours.
TimeGridViewUnavailable takes an unavailable segment and shades it; see the resource view.
List
| Part | Model prop | Element | Notes |
|---|---|---|---|
ListView | model | div | role='region', labelled "Event list". |
ListViewSection | section | section | data-date or data-resource-id; supply an accessible label for grouped sections. |
ListViewSectionHeader | section | h2 | Consumer-supplied date or resource heading. |
ListViewDay | day | section | data-date, optional data-resource-id. |
ListViewDayHeader | day | h3 | |
ListViewEvent | event | button | |
ListViewEmpty | none | div | Renders only when the list has no days. |
Timeline
| Part | Model prop | Element | Notes |
|---|---|---|---|
TimelineView | model | div | role='region', labelled "Timeline". Scrolls both ways. --cal-slot-columns sizes header slots. |
TimelineViewHeader | none | div | Sticky; holds the day headers and the slot labels. |
TimelineViewDayHeader | day | div | data-today, data-date, data-weekday. |
TimelineViewDayTrigger | calendar, day, view | button | Navigates through calendar to view on the day. See day triggers. |
TimelineViewSlotLabel | slot | div | slot is the time slot, not the HTML attribute. |
TimelineViewBody | none | div | Holds the rows and the now indicator. |
TimelineViewRow | row | div | data-unavailable, data-resource-id. |
TimelineViewResource | row | div | The resource cell; sticks to the start edge. |
TimelineViewResourceToggle | calendar, row | button | Expands/collapses descendants; aria-expanded, default label; omitted for leaves. |
TimelineViewLane | row | div | Holds the row's unavailable time and events. |
TimelineViewUnavailable | segment | div | aria-hidden. |
TimelineViewBackground | background | div | aria-hidden, data-layer, data-kind; render inside TimelineViewLane. |
TimelineViewBackgroundEvent | segment | div | aria-hidden, continuation flags; render inside TimelineViewLane. |
TimelineViewEvent | segment | button | data-all-day, data-multi-day, data-continues-before, data-continues-after. |
TimelineViewNowIndicator | model | div | aria-hidden. Renders only while now is inside the range. |
The parts render no slot cells; themes draw the slot lines as a background of each lane.
Rows expose data-depth, data-parent-id and data-expanded. Resource cells expose data-depth,
data-expanded and --cal-resource-depth. Themes indent each level by --calendar-resource-indent (1rem by
default); override that token to change the spacing. Toggle icons inherit the theme's text color and focus style.
With one slot per day, omit the slot-label row; the date header is enough. For subday slots, include minutes in the
labels. The examples put the full event dates and times in title and aria-label, so clipped bar text stays
available.