CoreUI PRO Component
To use this component you must have a CoreUI PRO license. Buy the CoreUI PRO and get access to all PRO components, features, templates, and dedicated support.
React Calendar Component
Create consistent cross-browser and cross-device calendar
Example#
<CCalendar /><CCalendar startDate="2024-01-03" range /><CCalendar calendars={2} />Customizing#
CSS variables#
React date pickers use local CSS variables on .date-picker and .calendar for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
--cui-calendar-table-margin: #{$calendar-table-margin};--cui-calendar-table-cell-size: #{$calendar-table-cell-size};--cui-calendar-nav-padding: #{$calendar-nav-padding};--cui-calendar-nav-border: #{$calendar-nav-border-width} solid #{$calendar-nav-border-color};--cui-calendar-nav-date-color: #{$calendar-nav-date-color};--cui-calendar-nav-date-hover-color: #{$calendar-nav-date-hover-color};--cui-calendar-nav-icon-width: #{$calendar-nav-icon-width};--cui-calendar-nav-icon-height: #{$calendar-nav-icon-height};--cui-calendar-cell-header-inner-color: #{$calendar-cell-header-inner-color};--cui-calendar-cell-hover-bg: #{$calendar-cell-hover-bg};--cui-calendar-cell-disabled-color: #{$calendar-cell-disabled-color};--cui-calendar-cell-selected-color: #{$calendar-cell-selected-color};--cui-calendar-cell-selected-bg: #{$calendar-cell-selected-bg};--cui-calendar-cell-range-bg: #{$calendar-cell-range-bg};--cui-calendar-cell-range-hover-bg: #{$calendar-cell-range-hover-bg};--cui-calendar-cell-range-hover-border-color: #{$calendar-cell-range-hover-border-color};--cui-calendar-cell-today-color: #{$calendar-cell-today-color};How to use CSS variables#
const vars = { '--my-css-var': 10, '--my-another-css-var': "red" }return <CCalendar style={vars} />SASS variables#
$calendar-table-margin: .5rem !default;$calendar-table-cell-size: 2.75rem !default;
$calendar-nav-padding: .5rem !default;$calendar-nav-border-width: 1px !default;$calendar-nav-border-color: $border-color !default;$calendar-nav-date-color: $body-color !default;$calendar-nav-date-hover-color: $primary !default;$calendar-nav-icon-width: 1rem !default;$calendar-nav-icon-height: 1rem !default;
$calendar-nav-icon-double-next-color: $gray-600 !default;$calendar-nav-icon-double-next: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-double-next-color}' points='95.314 447.313 72.686 424.687 245.373 252 72.686 79.313 95.314 56.687 290.627 252 95.314 447.313'></polygon><polygon fill='#{$calendar-nav-icon-double-next-color}' points='255.314 447.313 232.686 424.687 405.373 252 232.686 79.313 255.314 56.687 450.627 252 255.314 447.313'></polygon></svg>") !default;$calendar-nav-icon-double-next-hover-color: $body-color !default;$calendar-nav-icon-double-next-hover: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-double-next-hover-color}' points='95.314 447.313 72.686 424.687 245.373 252 72.686 79.313 95.314 56.687 290.627 252 95.314 447.313'></polygon><polygon fill='#{$calendar-nav-icon-double-next-hover-color}' points='255.314 447.313 232.686 424.687 405.373 252 232.686 79.313 255.314 56.687 450.627 252 255.314 447.313'></polygon></svg>") !default;
$calendar-nav-icon-double-prev-color: $gray-600 !default;$calendar-nav-icon-double-prev: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-double-prev-color}' points='416.686 447.313 221.373 252 416.686 56.687 439.314 79.313 266.627 252 439.314 424.687 416.686 447.313'></polygon><polygon fill='#{$calendar-nav-icon-double-prev-color}' points='256.686 447.313 61.373 252 256.686 56.687 279.314 79.313 106.627 252 279.314 424.687 256.686 447.313'></polygon></svg>") !default;$calendar-nav-icon-double-prev-hover-color: $body-color !default;$calendar-nav-icon-double-prev-hover: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-double-prev-hover-color}' points='416.686 447.313 221.373 252 416.686 56.687 439.314 79.313 266.627 252 439.314 424.687 416.686 447.313'></polygon><polygon fill='#{$calendar-nav-icon-double-prev-hover-color}' points='256.686 447.313 61.373 252 256.686 56.687 279.314 79.313 106.627 252 279.314 424.687 256.686 447.313'></polygon></svg>") !default;
$calendar-nav-icon-next-color: $gray-600 !default;$calendar-nav-icon-next: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-next-color}' points='179.313 451.313 156.687 428.687 329.372 256 156.687 83.313 179.313 60.687 374.627 256 179.313 451.313'></polygon></svg>") !default;$calendar-nav-icon-next-hover-color: $body-color !default;$calendar-nav-icon-next-hover: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-next-hover-color}' points='179.313 451.313 156.687 428.687 329.372 256 156.687 83.313 179.313 60.687 374.627 256 179.313 451.313'></polygon></svg>") !default;
$calendar-nav-icon-prev-color: $gray-600 !default;$calendar-nav-icon-prev: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-prev-color}' points='324.687 451.313 129.373 256 324.687 60.687 347.313 83.313 174.628 256 347.313 428.687 324.687 451.313'></polygon></svg>") !default;$calendar-nav-icon-prev-hover-color: $body-color !default;$calendar-nav-icon-prev-hover: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-prev-hover-color}' points='324.687 451.313 129.373 256 324.687 60.687 347.313 83.313 174.628 256 347.313 428.687 324.687 451.313'></polygon></svg>") !default;
$calendar-cell-header-inner-color: $text-medium-emphasis !default;
$calendar-cell-hover-bg: $gray-200 !default;$calendar-cell-disabled-color: $text-disabled !default;
$calendar-cell-selected-color: $white !default;$calendar-cell-selected-bg: $primary !default;
$calendar-cell-range-bg: rgba($primary, .125) !default;$calendar-cell-range-hover-bg: rgba($primary, .25) !default;$calendar-cell-range-hover-border-color: $primary !default;
$calendar-cell-today-color: $danger !default;API#
CCalendar#
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