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
"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"Default
"primary"controlProps
Description
Props for calendar control button element.
Type
Omit<CalendarControlProps, "operation">dateFormat
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
{ component?: FC<DayProps> | undefined } & ButtonPropsdefaultMonth
Description
The initial month of the calendar.
Type
DateDefault
'new Date()'defaultType
Description
The initial type of the calendar.
Type
"month" | "date" | "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
"monday" | "sunday"Default
'monday'headerProps
Description
Props for calendar header element.
Type
HTMLUIPropsholidays
Description
Define holidays.
Type
Date[]labelProps
Description
Props for calendar label button element.
Type
{
icon?:
| IconProps
| ReactElement<any, string | JSXElementConstructor<any>>
| undefined
} & CalendarLabelPropslocale
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
DateminSelectValues
Description
The minimum selectable value.
Type
numbermonth
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-formatsmonthGridProps
Description
Props for calendar month grid element.
Type
HTMLUIPropsmonthProps
Description
Props for calendar month button element.
Type
{
component?: FC<{ index: number; month: string; year: number }> | undefined
} & ButtonPropsnextProps
Description
Props for calendar next control button element.
Type
Omit<CalendarControlProps, "operation">nextRef
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: "month" | "date" | "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
Omit<CalendarControlProps, "operation">prevRef
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
"md"tableProps
Description
Props for calendar month table element.
Type
MonthTablePropstoday
Description
If true, highlight today.
Type
booleanDefault
falsetype
Description
The type of the calendar.
Type
"month" | "date" | "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
"solid"weekdayFormat
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
{ component?: FC<WeekdayProps> | undefined } & UIProps &
Omit<HTMLProps<"div">, keyof UIProps>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-formatsyearGridProps
Description
Props for calendar year grid element.
Type
HTMLUIPropsyearProps
Description
Props for calendar year button element.
Type
{
component?: FC<{ index: number; year: number }> | undefined
} & ButtonPropsEdit this page on GitHub