Calendar
@stellaria/nebula-webCalendarPropsPreview
Props
18| Prop | Type | Default |
|---|---|---|
autoFocus | boolean | false |
className | string | — |
color | ColorExtended | "primary" |
defaultValue | string | "" |
disabled | boolean | false |
field | NebulaField<string> | — |
isDateUnavailable | ((value: string) => boolean) | — |
label | ReactNode | — |
labels | CalendarLabels | — |
locale | string | — |
maxValue | string | — |
minValue | string | — |
onChange | ((value: string) => void) | — |
readOnly | boolean | false |
size | Size | "md" |
value | string | — |
variant | CalendarVariant | "filled" |
visibleMonths | number | 1 |
Slot props
7Each one spreads over an inner element, so you can restyle a region without forking the component.
| Prop | Type | Default |
|---|---|---|
cellProps Every day. It spreads over ALL of them and goes AFTER the aria cell props, which bring the keyboard and the selection; they carry `data-selected`, `data-today` and the rest of the state, which is where their colours come from. | BoxSlotProps | — |
headerProps The header, with the two arrows and the month label. | BoxSlotProps | — |
headingProps The month label, which is the `h2` of the header. React Aria composes its text. | TextSlotProps | — |
monthsProps The month row. With `visibleMonths` greater than 1, this is what lines them up. | BoxSlotProps | — |
nextProps The next-month arrow. Its accessible label comes from `labels.nextMonth`. | Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> | — |
previousProps The previous-month arrow. Its accessible label comes from `labels.previousMonth`. | Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> | — |
weekdayProps Every weekday label. | Omit<DetailedHTMLProps<ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> | — |
Also accepts
On top of its own props, this component forwards these groups.