Calendar

CalendarView

CalendarView — generic month and week grids with a phone agenda. - `month` mode: a month grid (`role="grid"`, roving focus, arrow keys). All-day and multi-day items render as bands across the days they cover; a day that has more than fits shows "+N more", which opens the day in a panel under the grid (never a modal) or follows `dayHref`. - `week` mode: one seven-day grid controlled by `date`. In `auto`, `autoMode="week"` selects a week grid with its seven-day phone agenda. - `agenda` mode: a scrollable strip of the month's days above a day-by-day list. `auto` (default) uses the agenda below 48rem, the grid above. Every day is computed in `timeZone` (IANA) and every name comes from `Intl` in `locale`, so the browser's own zone and language never leak in. The visible month and selected day can be controlled (`year`/`month`, `selectedDate`) and are reported through `onNavigate` / `onSelectDate`, so a page can keep them in its URL.

Public export

typescript

import { CalendarView } from '@happyvertical/smrt-ui/calendar';

Import path: @happyvertical/smrt-ui/calendar
Props: 19
Props described: 19 of 19
Bindable state: 0
Callback events: 3
Verified release: 0.57.40

Props

NameTypeRequiredDescription

itemsCalendarItem[]NoItems to show.

yearnumberNoVisible year (controlled together with `month`).

monthnumberNoVisible month, 1-12 (controlled together with `year`).

datestringNoA YYYY-MM-DD date in the visible week (controlled).

autoMode'month' | 'week'NoDesktop grid in auto mode; defaults to month.

selectedDatestring | nullNoSelected day as `YYYY-MM-DD` (controlled).

timeZonestringNoIANA time zone every day is computed in. Defaults to the browser's.

localestringNoBCP 47 locale for month/day names and times. Defaults to the i18n locale.

weekStartsOnnumberNoFirst weekday column, 0 = Sunday. Defaults to the locale's.

modeCalendarModeNo`auto` switches to the agenda below 48rem.

maxPerDaynumberNoRows per day in either grid, including band rows.

headingLevel2 | 3 | 4NoHeading level of the visible period title.

nowDateNo"Now", for today highlighting (tests, server rendering). Without it the calendar reads the clock after mount and moves "today" at midnight in `timeZone`; before mount (server rendering) nothing is highlighted as today. Server-rendered pages should pass `timeZone` and `year`/`month` (or `now`) so the server and the browser pick the same month.

onNavigate(period: CalendarNavigation) => voidNoReports month navigation, or week navigation with its first date key.

onSelectDate(date: string) => voidNoCalled when a day is selected.

onItemSelect(item: CalendarItem) => voidNoCalled when an item is activated (also for items with `href`).

dayHref(date: string) => string | undefinedNoLink for a day; days become links and "+N more" follows it.

itemContentSnippet<[CalendarItem, { time: string; }]>NoCustom row content for an item in the day panel and agenda.

classstringNoExtra class on the root.

Bindable state

This component has no bindable public state.

Callback events

onNavigate(period: CalendarNavigation) => void
onSelectDate(date: string) => void
onItemSelect(item: CalendarItem) => void

Public export

Props

Bindable state

Callback events

Examples and explanation