import { CCalendar } from '@coreui/react'// orimport CCalendar from '@coreui/react/src/components/calendar/CCalendar'| Property | Description | Type | Default |
|---|---|---|---|
| calendarDate | Default date of the component | string | Date | startDate |
| calendars | The number of calendars that render on desktop devices. | number | 1 |
| className | A string of all className you want applied to the component. | string | - |
| dayFormat 4.3.0+ | Set the format of day name. | 'numeric' | '2-digit' | ((date: Date) => string | number) | numeric |
| disabledDates | Specify the list of dates that cannot be selected. | Date[] | Date[][] | (Date | Date[])[] | - |
| endDate | Initial selected to date (range). | string | Date | - |
| firstDayOfWeek | Sets the day of start week. - 0 - Sunday, - 1 - Monday, - 2 - Tuesday, - 3 - Wednesday, - 4 - Thursday, - 5 - Friday, - 6 - Saturday, | number | 1 |
| locale | Sets the default locale for components. If not set, it is inherited from the browser. | string | default |
| maxDate | Max selectable date. | string | Date | - |
| minDate | Min selectable date. | string | Date | - |
| navNextDoubleIcon | The custom next double icon. | ReactNode | - |
| navNextIcon | The custom next icon. | ReactNode | - |
| navPrevDoubleIcon | The custom prev double icon. | ReactNode | - |
| navPrevIcon | The custom prev icon. | ReactNode | - |
| navYearFirst 4.3.0+ | Reorder year-month navigation, and render year first. | boolean | - |
| navigation | Show arrows navigation. | boolean | true |
| onCalendarDateChange | Callback fired when the calendar date changed. | (date: Date) => void | - |
| onDayHover | Callback fired when the user hovers over the calendar cell. | (date: Date) => void | - |
| onEndDateChange | Callback fired when the end date changed. | (date: Date, formatedDate?: string) => void | - |
| onSelectEndChange | Callback fired when the selection type changed. | (value: boolean) => void | - |
| onStartDateChange | Callback fired when the start date changed. | (date: Date, formatedDate?: string) => void | - |
| onViewChanged | Callback fired when the view type of calendar changed. | (view: string) => void | - |
| range | Allow range selection. | boolean | - |
| selectAdjacementDays 4.11.0+ | Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the showAdjacementDays option is set to true. | boolean | false |
| selectEndDate | Toggle select mode between start and end date. | boolean | - |
| showAdjacementDays 4.11.0+ | Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month. | boolean | true |
| startDate | Initial selected date. | string | Date | - |
| weekdayFormat | Set length or format of day name. | number | 'long' | 'narrow' | 'short' | ((date: Date) => string | number) | 2 |
On this page