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 forward ref.
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.