Calendar — Design System

Props

The full prop API for Calendar. Same surface in web and React Native — bundlers pick the right variant via the react-native export condition.

Prop	Type	Default	Description	Since
`mode`	`'single' \| 'range' \| 'multiple'`	`'single'`	DayPicker v10 selection mode.	0.5.0
`selected`	`Date \| DateRange \| Date[]`	—	Controlled selected date, range, or dates.	0.5.0
`onSelect`	`(value, selectedDay, modifiers, event) => void`	—	Selection change handler from DayPicker v10.	0.5.0
`required`	`boolean`	`false`	Prevent clearing the current selection.	0.10.1
`min / max`	`number`	—	Bound multiple selection count or range length depending on mode.	0.10.1
`disabled`	`Matcher \| Matcher[]`	—	Disable dates using DayPicker matchers.	0.5.0
`hidden`	`Matcher \| Matcher[]`	—	Hide dates from the grid.	0.10.1
`month / defaultMonth`	`Date`	—	Controlled or uncontrolled visible month.	0.10.1
`onMonthChange`	`(month: Date) => void`	—	Called when navigation changes the visible month.	0.5.0
`startMonth / endMonth`	`Date`	—	Bound navigation. Replaces deprecated v9 from/to props.	0.10.1
`captionLayout`	`'label' \| 'dropdown' \| 'dropdown-months' \| 'dropdown-years'`	`'label'`	Static caption or month/year dropdown captions.	0.10.1
`navLayout`	`'after' \| 'around'`	—	Navigation button placement and tab order.	0.10.1
`numberOfMonths`	`number`	`1`	Number of month grids to display.	0.5.0
`pagedNavigation`	`boolean`	`false`	Navigate by the displayed month page size.	0.10.1
`reverseMonths / reverseYears`	`boolean`	`false`	Reverse rendered month order or dropdown year order.	0.10.1
`fixedWeeks`	`boolean`	`false`	Always render six week rows.	0.10.1
`showOutsideDays`	`boolean`	`true`	Show days from adjacent months.	0.5.0
`hideWeekdays / showWeekNumber`	`boolean`	`false`	Toggle weekday headers or week-number column.	0.10.1
`locale / lang / dir`	`DayPickerLocale \| string`	—	Localization object, language tag, and text direction.	0.10.1
`weekStartsOn / ISOWeek`	`number \| boolean`	—	Week-rule configuration.	0.10.1
`timeZone / noonSafe`	`string \| boolean`	—	Time-zone-aware calendar math.	0.10.1
`numerals`	`Numerals`	`'latn'`	Numeral system for formatted dates.	0.10.1
`components`	`Partial<CustomComponents>`	—	Override DayPicker v10 render slots.	0.10.1
`formatters / labels`	`Partial<Formatters> \| Partial<Labels>`	—	Customize visible strings and ARIA labels.	0.10.1
`modifiers`	`Record<string, Matcher \| Matcher[]>`	—	Named product-specific date states.	0.10.1
`modifiersClassNames / modifiersStyles`	`object`	—	Style named modifiers.	0.10.1
`footer`	`ReactNode`	—	Footer live region for status text.	0.10.1
`className / classNames / style / styles`	`string \| object`	—	Tokenized root, element, and inline style overrides merged with MiHCM defaults.	0.5.0

Import

import { Calendar } from '@mihcm/ui/Calendar';