Components

MonthView

Displays a traditional calendar grid with month-level navigation.

Props

Prop Type Default Description

numberOfMonths number | undefined 1 Number of months to display simultaneously (1–12).

fixedWeeks boolean | undefined false When true, always render 6 week rows per month grid. Prevents layout shifts when navigating between months.

outsideDays OutsideDays | undefined "enabled" Controls how days from adjacent months are displayed.

outOfRangeBehavior MonthOutOfRangeBehavior | undefined "unbounded" How month navigation behaves at the min/max bounds. min/max always restrict which **days are selectable**; this controls whether you can still **view** months outside them. See MonthOutOfRangeBehavior. - "unbounded" — Prev/Next are never disabled by min/max; you can page to any month, with out-of-range days rendered disabled. - "stop" — Prev/Next disable once the destination month crosses the bound.

month PlainYearMonth | undefined — The controlled visible month. When provided, the component is controlled. Interpreted in the ISO calendar (the year/month are read as ISO values). The locale only affects how the month is displayed, so this value round-trips directly with onMonthChange.

defaultMonth PlainYearMonth | undefined — The initial visible month (uncontrolled). Interpreted in the ISO calendar.

onMonthChange ((month: PlainYearMonth) => void) | undefined — Called when the visible month changes via navigation or focus movement. Not called on initial mount. The argument is an ISO PlainYearMonth.

children React.ReactNode — React children.

Prop	Type	Default	Description
numberOfMonths	number \| undefined	1	Number of months to display simultaneously (1–12).
fixedWeeks	boolean \| undefined	false	When `true`, always render 6 week rows per month grid. Prevents layout shifts when navigating between months.
outsideDays	OutsideDays \| undefined	"enabled"	Controls how days from adjacent months are displayed.
outOfRangeBehavior	MonthOutOfRangeBehavior \| undefined	"unbounded"	How month navigation behaves at the `min`/`max` bounds. `min`/`max` always restrict which days are selectable; this controls whether you can still view months outside them. See MonthOutOfRangeBehavior. - `"unbounded"` — Prev/Next are never disabled by `min`/`max`; you can page to any month, with out-of-range days rendered disabled. - `"stop"` — Prev/Next disable once the destination month crosses the bound.
month	PlainYearMonth \| undefined	—	The controlled visible month. When provided, the component is controlled. Interpreted in the ISO calendar (the year/month are read as ISO values). The `locale` only affects how the month is displayed, so this value round-trips directly with onMonthChange.
defaultMonth	PlainYearMonth \| undefined	—	The initial visible month (uncontrolled). Interpreted in the ISO calendar.
onMonthChange	((month: PlainYearMonth) => void) \| undefined	—	Called when the visible month changes via navigation or focus movement. Not called on initial mount. The argument is an ISO `PlainYearMonth`.
children	React.ReactNode	—	React children.

Hooks

Prop Type Default Description

numberOfMonths* number — Number of simultaneously visible months.

fixedWeeks* boolean — Whether month grids always render 6 week rows.

outsideDays* OutsideDays — How outside-month days are displayed.

outOfRangeBehavior* MonthOutOfRangeBehavior — How month navigation behaves at bounds.

goNextMonth* () => void — Navigate to the next month(s).

goPrevMonth* () => void — Navigate to the previous month(s).

setGridLabelId* (monthIndex: number, id: string | undefined) => void — Register (or clear) the id of a label element for aria-labelledby, keyed by month index.

gridFocusedRef* React.RefObject<boolean> — Ref tracking whether the grid currently holds DOM focus (avoids state re-renders).

Prop	Type	Default	Description
numberOfMonths*	number	—	Number of simultaneously visible months.
fixedWeeks*	boolean	—	Whether month grids always render 6 week rows.
outsideDays*	OutsideDays	—	How outside-month days are displayed.
outOfRangeBehavior*	MonthOutOfRangeBehavior	—	How month navigation behaves at bounds.
goNextMonth*	() => void	—	Navigate to the next month(s).
goPrevMonth*	() => void	—	Navigate to the previous month(s).
setGridLabelId*	(monthIndex: number, id: string \| undefined) => void	—	Register (or clear) the id of a label element for `aria-labelledby`, keyed by month index.
gridFocusedRef*	React.RefObject<boolean>	—	Ref tracking whether the grid currently holds DOM focus (avoids state re-renders).

Prop Type Default Description

currentMonth* { year: number; month: number; } — The primary displayed month (year + month).

weeks* PlainDate[][] — 2D array of weeks for the first visible month grid.

allMonths* MonthData[] — Pre-computed data for all visible months (length = numberOfMonths).

currentDateTime* PlainDateTime — Date-time representing the viewed month with time from the selection (for "today" highlighting).

gridLabelIds* Record<number, string> — Map of month index to label element id (for per-grid aria-labelledby).

rootState* RootState — The root component's state object for render functions.

Prop	Type	Default	Description
currentMonth*	{ year: number; month: number; }	—	The primary displayed month (year + month).
weeks*	PlainDate[][]	—	2D array of weeks for the first visible month grid.
allMonths*	MonthData[]	—	Pre-computed data for all visible months (length = `numberOfMonths`).
currentDateTime*	PlainDateTime	—	Date-time representing the viewed month with time from the selection (for "today" highlighting).
gridLabelIds*	Record<number, string>	—	Map of month index to label element id (for per-grid `aria-labelledby`).
rootState*	RootState	—	The root component's state object for render functions.