- Docs
- Components
- Calendar
Calendar
A calendar displays one or more date grids and allows users to select a single date.
Preview
Code
Installation
CLI
Manual
Anatomy
Single import
Multiple imports
Examples
Range
Preview
Code
API Reference
Calendar.Root
| Prop | Type | Default |
|---|---|---|
value | DateValue | |
defaultValue | DateValue | |
onChange | function | |
minValue | DateValue | |
maxValue | DateValue | |
isDisabled | boolean | |
isReadOnly | boolean | |
isDateUnavailable | function | |
variant | enum |
Calendar.Header
| Prop | Type | Default |
|---|---|---|
className | string |
Calendar.Nav
| Prop | Type | Default |
|---|---|---|
className | string |
Calendar.Month
| Prop | Type | Default |
|---|---|---|
className | string |
Calendar.Grid
| Prop | Type | Default |
|---|---|---|
className | string |
Calendar.GridHeader
| Prop | Type | Default |
|---|---|---|
children | function |
Calendar.HeaderCell
| Prop | Type | Default |
|---|---|---|
className | string |
Calendar.GridBody
| Prop | Type | Default |
|---|---|---|
children | function |
Calendar.Cell
| Prop | Type | Default |
|---|---|---|
date | CalendarDate | |
shape | enum | "default" |
className | string |
RangeCalendar.Root
Used for selecting date ranges. Accepts the same props as Calendar.Root but with range values.
| Prop | Type | Default |
|---|---|---|
value | RangeValue<DateValue> | |
defaultValue | RangeValue<DateValue> | |
onChange | function | |
minValue | DateValue | |
maxValue | DateValue | |
isDisabled | boolean | |
isReadOnly | boolean | |
isDateUnavailable | function | |
variant | enum |