This Component is a part of CoreUI PRO for React.js, an advanced UI library offering over 100 components designed for creating responsive, sleek, and powerful applications. Experience it yourself by signing up for a complimentary 7-day trial.

React Calendar Component

Calendar

The React Calendar Component is a versatile, customizable tool for creating responsive calendars in React, supporting day, month, and year selection, and global locales.

On this page

Example#

Explore the React Calendar component's basic usage through sample code snippets demonstrating its core functionality.

Days#

Select specific days using the React Calendar component. The example below shows basic usage.

<div className="d-flex justify-content-center">
  <CCalendar className="border rounded" locale="en-US" startDate="2024/02/13" />
</div>

Weeks#

Set the selectionType to week to enable selection of entire week. You can also add showWeekNumber to show week numbers.

<div className="d-flex justify-content-center">
  <CCalendar
    className="border rounded"
    locale="en-US"
    selectionType="week"
    showWeekNumber
    startDate="2024W15"
  />
</div>

Months#

Set the selectionType property to month to enable selection of entire months.

<div className="d-flex justify-content-center">
  <CCalendar className="border rounded" locale="en-US" selectionType="month" startDate="2024-2" />
</div>

Years#

Set the selectionType property to year to enable years range selection.

<div className="d-flex justify-content-center">
  <CCalendar className="border rounded" locale="en-US" selectionType="year" startDate="2024" />
</div>

Multiple calendar panels#

Display multiple calendar panels side by side by setting the calendars property. This can be useful for selecting ranges or comparing dates across different months.

<div className="d-flex justify-content-center">
  <CCalendar calendars={2} className="border rounded" locale="en-US" />
</div>

Range selection#

Enable range selection to allow users to pick a start and end date. This example shows how to configure the React Calendar component to handle date ranges.

<div className="d-flex justify-content-center">
  <CCalendar
    calendars={2}
    className="border rounded"
    locale="en-US"
    range
    startDate="2022/08/23"
    endDate="2022/09/08"
  />
</div>

Disabled dates#

The Calendar component includes functionality to disable specific dates, such as weekends or holidays, using the disabledDates prop. This prop takes an array and applies custom logic to determine which dates should be disabled.

const calendarDate = new Date(2022, 2, 1)
const disabledDates = [
  [new Date(2022, 2, 4), new Date(2022, 2, 7)],
  new Date(2022, 2, 16),
  new Date(2022, 3, 16),
  [new Date(2022, 4, 2), new Date(2022, 4, 8)],
  [new Date(2022, 5, 1), new Date(2022, 6, 31)],
]
const maxDate = new Date(2022, 12, 0)
const minDate = new Date(2022, 1, 1)

return (
  <div className="d-flex justify-content-center">
    <CCalendar
      calendarDate={calendarDate}
      calendars={2}
      className="border rounded"
      disabledDates={disabledDates}
      locale="en-US"
      maxDate={maxDate}
      minDate={minDate}
      range
    />
  </div>
)

Non-english locale#

The CoreUI React Calendar allows users to display dates in non-English locales, making it suitable for international applications.

Auto#

By default, the Calendar component uses the browser's default locale. However, you can easily configure it to use a different locale supported by the JavaScript Internationalization API. This feature helps create inclusive and accessible applications for a diverse audience.

<div className="d-flex justify-content-center">
  <CCalendar className="border rounded" />
</div>

Chinese#

Here is an example of the React Calendar component with Chinese locale settings.

<div className="d-flex justify-content-center">
  <CCalendar className="border rounded" locale="zh-CN" />
</div>

Japanese#

Below is an example of the Calendar component with Japanese locale settings.

<div className="d-flex justify-content-center">
  <CCalendar className="border rounded" locale="ja" />
</div>

Korean#

Here is an example of the Calendar component with Korean locale settings.

<div className="d-flex justify-content-center" dir="rtl">
  <CCalendar className="border rounded" locale="ko" />
</div>

Right to left support#

RTL support is built-in and can be explicitly controlled through the $enable-rtl variables in scss.

Hebrew#

Example of the Calendar component with RTL support, using the Hebrew locale.

<div className="d-flex justify-content-center" dir="rtl">
  <CCalendar className="border rounded" locale="he-IL" />
</div>

Persian#

Example of the React Calendar component with Persian locale settings.

<div className="d-flex justify-content-center">
  <CCalendar className="border rounded" locale="fa-IR" />
</div>

Customizing#

CSS variables#

The React Calendar uses local CSS variables on .calendar for real-time customization. Values for these CSS variables are set via Sass, but they can also be overridden directly in the component for dynamic styling.

--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-color: #{$calendar-nav-border-color};
--cui-calendar-nav-border: #{$calendar-nav-border-width} solid var(--cui-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-nav-icon-double-next: #{escape-svg($calendar-nav-icon-double-next)};
--cui-calendar-nav-icon-double-prev: #{escape-svg($calendar-nav-icon-double-prev)};
--cui-calendar-nav-icon-next: #{escape-svg($calendar-nav-icon-next)};
--cui-calendar-nav-icon-prev: #{escape-svg($calendar-nav-icon-prev)};
--cui-calendar-nav-icon-color: #{$calendar-nav-icon-color};
--cui-calendar-nav-icon-hover-color: #{$calendar-nav-icon-hover-color};
--cui-calendar-cell-header-inner-color: #{$calendar-cell-header-inner-color};
--cui-calendar-cell-week-number-color: #{$calendar-cell-week-number-color};
--cui-calendar-cell-hover-color: #{$calendar-cell-hover-color};
--cui-calendar-cell-hover-bg: #{$calendar-cell-hover-bg};
--cui-calendar-cell-focus-box-shadow: #{$calendar-cell-focus-box-shadow};
--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};
--cui-calendar-cell-week-number-color: #{$calendar-cell-week-number-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:                  var(--cui-border-color) !default;
$calendar-nav-date-color:                    var(--cui-body-color) !default;
$calendar-nav-date-hover-color:              var(--cui-primary) !default;
$calendar-nav-icon-width:                    1rem !default;
$calendar-nav-icon-height:                   1rem !default;
$calendar-nav-icon-color:                    var(--cui-tertiary-color) !default;
$calendar-nav-icon-hover-color:              var(--cui-body-color) !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='#000' 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='#000' 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:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#000' 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='#000' 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:                     url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#000' 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:                     url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#000' 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:           var(--cui-secondary-color) !default;
$calendar-cell-week-number-color:            var(--cui-secondary-color) !default;

$calendar-cell-hover-color:                  var(--cui-body-color) !default;
$calendar-cell-hover-bg:                     var(--cui-tertiary-bg) !default;
$calendar-cell-disabled-color:               var(--cui-tertiary-color) !default;

$calendar-cell-focus-box-shadow:             $focus-ring-box-shadow !default;

$calendar-cell-selected-color:               $white !default;
$calendar-cell-selected-bg:                  var(--cui-primary) !default;

$calendar-cell-range-bg:                     rgba(var(--cui-primary-rgb), .125) !default;
$calendar-cell-range-hover-bg:               rgba(var(--cui-primary-rgb), .25) !default;
$calendar-cell-range-hover-border-color:     var(--cui-primary) !default;

$calendar-cell-today-color:                  var(--cui-danger) !default;

$calendar-cell-week-number-color:            var(--cui-tertiary-color) !default;

API#

CCalendar#

import { CCalendar } from '@coreui/react'
// or
import CCalendar from '@coreui/react/src/components/calendar/CCalendar'

Property	Description	Type	Default
ariaNextMonthLabel 5.5.0+	A string that provides an accessible label for the button that navigates to the next month in the calendar. This label is read by screen readers to describe the action associated with the button.	`string`	Next month
ariaNextYearLabel 5.5.0+	A string that provides an accessible label for the button that navigates to the next year in the calendar. This label is intended for screen readers to help users understand the button's functionality.	`string`	Next year
ariaPrevMonthLabel 5.5.0+	A string that provides an accessible label for the button that navigates to the previous month in the calendar. Screen readers will use this label to explain the purpose of the button.	`string`	Previous month
ariaPrevYearLabel 5.5.0+	A string that provides an accessible label for the button that navigates to the previous year in the calendar. This label helps screen reader users understand the button's function.	`string`	Previous year
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: string` \| `Date) => void`	-
onDateHover	Callback fired when the user hovers over the calendar cell.	`(date: string` \| `Date) => void`	-
onEndDateChange	Callback fired when the end date changed.	`(date: string` \| `Date, formatedDate?: string) => void`	-
onSelectEndChange	Callback fired when the selection type changed.	`(value: boolean) => void`	-
onStartDateChange	Callback fired when the start date changed.	`(date: string` \| `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`	-
selectionType 5.0.0+	Specify the type of date selection as day, week, month, or year.	`'day'` \| `'week'` \| `'month'` \| `'year'`	day
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
showWeekNumber 5.0.0+	Set whether to display week numbers in the calendar.	`boolean`	false
startDate	Initial selected date.	`string` \| `Date`	-
weekNumbersLabel 5.0.0+	Label displayed over week numbers in the calendar.	`string`	-
weekdayFormat	Set length or format of day name.	`number` \| `'long'` \| `'narrow'` \| `'short'` \| `((date: Date) => string` \| `number)`	2