Components

WeeksView

Displays a configurable window of continuous week rows that span month boundaries.

Props

PropTypeDefaultDescription
weekCount*number—Number of week rows to display simultaneously.
firstWeekFirstWeekSpec—The controlled first visible week. When provided, the component is controlled.
defaultFirstWeekFirstWeekSpec—The initial first visible week (uncontrolled).
onFirstWeekChange(date: PlainDate) => void—Called when the first visible week changes via navigation or focus movement.
scrollBy"row" | "page""row"How much to scroll per navigation step. - "row" — scroll one week row at a time. - "page" — scroll a full page (all visible rows) at a time.
overflowBehaviorOverflowBehavior"unbounded"How navigation behaves at min/max bounds.
onWindowChange(info: WindowInfo) => void—Called when the visible window changes.
childrenReact.ReactNode—React children.

Window Info

PropTypeDefaultDescription
windowStart*PlainDate—The first date of the visible window.
windowEnd*PlainDate—The last date of the visible window.
weekCount*number—Number of week rows in the window (the prop value, not actual when shrunk).
dayCount*number—Total number of calendar days in the window.
enabledWeekCount*number—Number of weeks that contain at least one enabled date.
enabledDayCount*number—Number of enabled (selectable) dates in the window.
visibleMonths*VisibleMonth[]—Distinct months visible in the window, in chronological order.

First Week Spec

PropTypeDefaultDescription
toLocaleString*(() => string) | ((locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined) => string) | { (): string; (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string; (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string; }—
toString*((options?: Temporal.ShowCalendarOption | undefined) => string) | (() => string) | (() => string)—
valueOf*(() => never) | (() => number) | (() => Object)—

Members

PlainDateDate{ isoWeek: number; isoYear: number; }{ week: number; year: number; }{ month: number; year: number; day?: number; }