StellarUI

<stellar-calendar-events>

Time-grid scheduler with hourly slots and overlap-aware event cards.

Properties

Component

Example

Preview

Markup

Copy

<stellar-calendar-events
  date="2026-04-22"
  view="week"
>
  <stellar-calendar-event date="2026-04-22" start="2026-04-22T08:30:00" end="2026-04-22T10:00:00" title="Standup" subtitle="Team sync"></stellar-calendar-event>
  <stellar-calendar-event date="2026-04-24" start="2026-04-24T11:30:00" end="2026-04-24T12:00:00" title="Design review" subtitle="Calendar polish" tone="tertiary"></stellar-calendar-event>
</stellar-calendar-events>

API

Complete props, events, slots, and implementation notes for the shipped calendar events view.

Props

Prop	Type	Default	Notes
`date`	`string`	`''`	Visible anchor day. In `view="day"` it is the exact day shown; in `view="week"` it selects the week that contains that day.
`day`	`boolean`	`false`	When true, the grid shows only the anchored `date`. When false, it shows the week containing that date.
`slotHeight`	`number`	`0`	Height in pixels for each grid slot. When omitted, the component uses its internal default.
`startHour`	`string`	`''`	Visible grid start in `HH:MM`. When omitted, the view starts at `08:00`.
`endHour`	`string`	`''`	Visible grid end in `HH:MM`. When omitted, the view ends 12 hours after the effective start hour.
`gridMinutes`	`number`	`0`	Minute interval between grid lines. When omitted, the component uses its internal default.
`minDuration`	`number`	`0`	Minimum event duration, in minutes, used for layout and collision rendering.
`weekStart`	`sunday \| monday`	`sunday`	Controls the first day of the week when the component is in week view.
`disabled`	`boolean`	`false`	Disables event interaction across the whole view.
`readonly`	`boolean`	`false`	Leaves the view visible but prevents event selection changes.

Events

Event	Kind	Notes
`eventselect`	custom event	Fires when an event card is selected. Detail includes id, title, day, start, and end.

Slots

Slot	Notes
`default`	Event source children. Author them as `<stellar-calendar-event>` nodes.

Notes

`date` is the visible anchor day: `day` shows that exact day, while the default weekly mode shows the week containing it.
Use `date`, `view`, `start-hour`, and `end-hour` to define the visible horizon.
Add child `<stellar-calendar-event>` nodes with `start`/`end` ISO values or `HH:MM` times plus `date`.