amountOfMonths
Description
The number of months to display.
Type
numberDefault
1Calendar
Calendar is a component for displaying or selecting dates in a calendar.
Props
CalendarProps
colorScheme
Description
The visual color appearance of the component.
Type
"whiteAlpha" | "blackAlpha" | "gray" | "neutral" | "red" | "rose" | "pink" | "flashy" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia"Default
primarycontrolProps
Description
Props for calendar control button element.
Type
IconButtonPropsdateFormat
Description
The format used for conversion. Check the docs to see the format of possible modifiers you can pass.
Type
stringDefault
'MMMM YYYY'Docs
https://day.js.org/docs/en/display/format#list-of-localized-formatsdayProps
Description
Props for calendar day button element.
Type
Omit<PropsOf<"button">, "ref" | keyof StyleProps> & StyleProps & PseudoProps & { __css?: CSSUIObject | undefined; sx?: CSSUIObject | undefined; css?: Interpolation<...>; } & { ...; } & ThemeProps<...> & ButtonOptions & { ...; }defaultMonth
Description
The initial month of the calendar.
Type
DateDefault
'new Date()'defaultType
Description
The initial type of the calendar.
Type
"date" | "month" | "year"defaultValue
Description
The initial value of the calendar.
Type
NonNullable<Y>disableOutsideDays
Description
If true, outside days will be disabled.
Type
booleanDefault
falseenableMultiple
Description
If true, enables date multiple selection.
Type
booleanDefault
falseenableRange
Description
If true, enables date range selection.
Type
booleanDefault
falseexcludeDate
Description
Callback function to determine whether the day should be disabled.
Type
(date: Date) => booleanfirstDayOfWeek
Description
Define the first day of the week.
Type
"sunday" | "monday"Default
'monday'headerProps
Description
Props for calendar header element.
Type
HTMLUIProps<"div">holidays
Description
Define holidays.
Type
Date[]labelProps
Description
Props for calendar label button element.
Type
Omit<PropsOf<"button">, "ref" | keyof StyleProps> & StyleProps & PseudoProps & { __css?: CSSUIObject | undefined; sx?: CSSUIObject | undefined; css?: Interpolation<...>; } & { ...; } & ThemeProps<...> & ButtonOptions & { ...; }locale
Description
The locale of the calendar. Check the docs to see the locale of possible modifiers you can pass.
Type
stringDefault
'en'Docs
https://day.js.org/docs/en/i18n/instance-localemaxDate
Description
The maximum possible date.
Type
DatemaxSelectValues
Description
The maximum selectable value.
Type
numberminDate
Description
The minimum possible date.
Type
Datemonth
Description
The month of the calendar.
Type
DatemonthFormat
Description
The format used for conversion. Check the docs to see the format of possible modifiers you can pass.
Type
stringDefault
'MM'Docs
https://day.js.org/docs/en/display/format#list-of-localized-formatsmonthProps
Description
Props for calendar month button element.
Type
Omit<PropsOf<"button">, "ref" | keyof StyleProps> & StyleProps & PseudoProps & { __css?: CSSUIObject | undefined; sx?: CSSUIObject | undefined; css?: Interpolation<...>; } & { ...; } & ThemeProps<...> & ButtonOptions & { ...; }nextProps
Description
Props for calendar next control button element.
Type
IconButtonPropsnextRef
Description
Ref to a next function.
Type
type ONLY_FOR_FORMAT =
| ((instance: (() => void | undefined) | null) => void)
| MutableRefObject<(() => void | undefined) | null>onChange
Description
The callback invoked when value state changes.
Type
(value: Y) => voidonChangeMonth
Description
The callback invoked when month state changes.
Type
(value: Date) => voidonChangeType
Description
The callback invoked when type state changes.
Type
(
type: "date" | "month" | "year",
year?: number | undefined,
month?: number | undefined,
) => voidpaginateBy
Description
The number of months to paginate.
Type
numberDefault
1prevProps
Description
Props for calendar previous control button element.
Type
IconButtonPropsprevRef
Description
Ref to a previous function.
Type
type ONLY_FOR_FORMAT =
| ((instance: (() => void | undefined) | null) => void)
| MutableRefObject<(() => void | undefined) | null>size
Description
The size of the Calendar.
Type
"sm" | "md" | "lg" | "full"Default
mdtableProps
Description
Props for calendar month table element.
Type
Omit<PropsOf<"table">, "ref" | keyof StyleProps> & StyleProps & PseudoProps & { __css?: CSSUIObject | undefined; sx?: CSSUIObject | undefined; css?: Interpolation<...>; } & { ...; } & { ...; }today
Description
If true, highlight today.
Type
booleanDefault
falsetype
Description
The type of the calendar.
Type
"date" | "month" | "year"typeRef
Description
Ref to a type function.
Type
type ONLY_FOR_FORMAT =
| ((instance: (() => void | undefined) | null) => void)
| MutableRefObject<(() => void | undefined) | null>value
Description
The value of the calendar.
Type
NonNullable<Y>variant
Description
The variant of the Calendar.
Type
"solid" | "subtle" | "unstyled"Default
solidweekdayFormat
Description
The format used for conversion. Check the docs to see the format of possible modifiers you can pass.
Type
stringDefault
'dd'Docs
https://day.js.org/docs/en/display/format#list-of-localized-formatsweekdayProps
Description
Props for calendar weekday element.
Type
Omit<PropsOf<"div">, "ref" | keyof StyleProps> & StyleProps & PseudoProps & { __css?: CSSUIObject | undefined; sx?: CSSUIObject | undefined; css?: Interpolation<...>; } & { ...; } & { ...; }weekendDays
Description
Define weekend days.
Type
number[]Default
'[0, 6]'withControls
Description
If true, display the calendar control buttons.
Type
booleanDefault
truewithHeader
Description
If true, display the calendar header.
Type
booleanDefault
truewithLabel
Description
If true, display the calendar label button.
Type
booleanDefault
truewithWeekdays
Description
If true, display the calendar weekdays.
Type
booleanDefault
trueyearFormat
Description
The format used for conversion. Check the docs to see the format of possible modifiers you can pass.
Type
stringDefault
'YYYY'Docs
https://day.js.org/docs/en/display/format#list-of-localized-formatsyearProps
Description
Props for calendar year button element.
Type
Omit<PropsOf<"button">, "ref" | keyof StyleProps> & StyleProps & PseudoProps & { __css?: CSSUIObject | undefined; sx?: CSSUIObject | undefined; css?: Interpolation<...>; } & { ...; } & ThemeProps<...> & ButtonOptions & { ...; }Edit this page on GitHub