◇

Calendar

12 parts

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  CalendarRoot,
  CalendarHeader,
  CalendarHeading,
  CalendarPrev,
  CalendarNext,
  CalendarGrid,
  CalendarGridHead,
  CalendarGridBody,
  CalendarGridRow,
  CalendarHeadCell,
  CalendarCell,
  CalendarCellTrigger,
} from '@robonen/primitives/calendar';

<CalendarRoot>
  <CalendarHeader />
  <CalendarHeading />
  <CalendarPrev />
  <CalendarNext />
  <CalendarGrid />
  <CalendarGridHead />
  <CalendarGridBody />
  <CalendarGridRow />
  <CalendarHeadCell />
  <CalendarCell />
  <CalendarCellTrigger />
</CalendarRoot>

API Reference

CalendarRoot

Root

Prop	Type	Default	Description
`defaultValue`?	`Date`	—	Uncontrolled default selected date.
`defaultPlaceholder`?	`Date`	—	Uncontrolled default placeholder (displayed month).
`minValue`?	`Date`	—	Minimum selectable date.
`maxValue`?	`Date`	—	Maximum selectable date.
`isDateUnavailable`?	`(date: Date) => boolean`	—	Predicate marking a date as unavailable (not selectable).
`isDateDisabled`?	`(date: Date) => boolean`	—	Predicate marking a date as disabled.
`pagedNavigation`?	`boolean`	`false`	Prev/Next navigate by `numberOfMonths` instead of one month.
`weekStartsOn`?	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6`	`0`	First day of week (0=Sun ... 6=Sat).
`weekdayFormat`?	`WeekDayFormat`	`'short'`	Width of localized weekday names.
`fixedWeeks`?	`boolean`	`true`	Always render 6 weeks per month.
`numberOfMonths`?	`number`	`1`	Number of months displayed simultaneously.
`disabled`?	`boolean`	`false`	Disable the whole calendar.
`readonly`?	`boolean`	`false`	Make the calendar read-only.
`initialFocus`?	`boolean`	`false`	Auto-focus the calendar on mount.
`locale`?	`string`	`'en'`	Locale for `Intl` formatting.
`dir`?	`'ltr' \| 'rtl'`	—	Reading direction.
`nextPage`?	`(placeholder: Date) => Date`	—	Override "next page" navigation logic.
`prevPage`?	`(placeholder: Date) => Date`	—	Override "prev page" navigation logic.
`calendarLabel`?	`string`	`'Calendar'`	Calendar accessible label prefix.

CalendarHeader

Header

No props or events — renders its element and forwards attributes.

CalendarHeading

Heading

No props or events — renders its element and forwards attributes.

CalendarPrev

Prop	Type	Default	Description
`prevPage`?	`(placeholder: Date) => Date`	—	Override the root's `prevPage` for just this button.

CalendarNext

Prop	Type	Default	Description
`nextPage`?	`(placeholder: Date) => Date`	—	Override the root's `nextPage` for just this button.

CalendarGrid

Grid

Prop	Type	Default	Description
`month`?	`Date`	—	The month this grid represents. Defaults to the root placeholder's month.

CalendarGridHead

GridHead

No props or events — renders its element and forwards attributes.

CalendarGridBody

GridBody

No props or events — renders its element and forwards attributes.

CalendarGridRow

GridRow

No props or events — renders its element and forwards attributes.

CalendarHeadCell

HeadCell

Prop	Type	Default	Description
`day`?	`Date`	—	The day this header cell represents — used for `aria-label`.

CalendarCell

Cell

Prop	Type	Default	Description
`date`	`Date`	—	The date this cell represents.

CalendarCellTrigger

CellTrigger

Prop	Type	Default	Description
`day`	`Date`	—	The day this trigger represents.
`month`?	`Date`	—	The month this trigger's cell belongs to. Defaults to grid context.