React Calendar

The React Calendar component provides an intuitive interface for date selection and navigation. It offers a comprehensive set of features including multiple view modes, date range restrictions, custom rendering, and accessibility support for building robust date-picking experiences.

Getting started

To create a new Vite project, refer to the Vite documentation. Once that Vite project is ready to run with default settings, let's add the React Calendar component to the project.

Installing Syncfusion® React packages

To use the React Calendar component in this project, the @syncfusion/react-calendars package needs to be installed using the following command:

npm install @syncfusion/react-calendars

Adding CSS reference

In this article, the Material theme is applied using CSS styles, which are available in installed packages. The necessary Material CSS styles for the Calendar component and its dependents were imported into the src/App.css file.

@import '../node_modules/@syncfusion/react-base/styles/material.css';
@import '../node_modules/@syncfusion/react-calendars/styles/material.css';

Adding Calendar component

To include the Calendar component in your application, import the Calendar from the @syncfusion/react-calendars package in App.tsx.

import { Calendar } from "@syncfusion/react-calendars";

Add the Calendar component in application as shown in below code example.

import { Calendar } from '@syncfusion/react-calendars';
import './App.css';

export default function App() {
    return (
        <div className="component-section">
            <Calendar />
        </div>
    );
};

Run the project

To run the project, use the following command:

npm run dev

The Calendar component provides a simple and intuitive way to select dates. By default, it displays the current month and allows users to navigate between months and years.

Views

The Calendar component supports multiple view modes including month, year, and decade views. Users can switch between different views using the start and depth properties to control the initial view and navigation depth.

Year picker

The Calendar component allows users to select a year by setting both the start and depth properties to Decade view. This configuration opens the calendar in decade view, displaying a range of years and able to pick a specific year directly from this view.

Month picker

The Calendar component allows users to select a month by setting both the start and depth properties to Year view. This configuration opens the calendar in year view, showing all months of the selected year and can choose a specific month directly.

Date Range

The minDate and maxDate properties used to control date selection by setting minimum and maximum selectable dates. This ensures users can only select dates within the specified range, making it ideal for booking systems and date-restricted scenarios.

Controlled Vs Uncontrolled

The Calendar component supports both controlled and uncontrolled modes. In controlled mode, the value prop manages the selected date externally, while uncontrolled mode uses the defaultValue prop for initial state with internal state management.

Toolbar

The Calendar component includes a showToolBar property that displays a header section. Enabling this property improves the visual clarity of the calendar layout. The toolbar works with both Horizontal and Vertical orientations.

Horizontal orientation

When orientation is set to Horizontal, the calendar displays months side by side in a horizontal layout. This format is suitable for wider containers and provides a broader view of dates across months.

Vertical orientation

When orientation is set to Vertical, the calendar stacks months vertically. This layout is ideal for narrower spaces and offers a scrollable view that aligns with vertical content flow.

Disabled Dates

The cellTemplate property is used to customize the appearance of specific dates, allowing to disable those dates to prevent user selection. This is useful for blocking weekends, holidays, or unavailable dates in scheduling applications.

Special Dates

The cellTemplate property is used to customize the appearance of specific dates by highlighting important dates, events, or special occasions with custom styling, icons, or indicators.

Week numbers

The weekNumber property is used to display week numbers alongside the calendar dates. This feature is particularly useful for business applications that reference ISO week numbers for planning and reporting purposes.

Week Days Format

The WeekDaysFormat property is used to display week days into a different formats alongside the calendar dates.

Multi Selection

The multiSelect property enable users to select multiple non-consecutive dates. This is useful for scheduling events, selecting date ranges, or marking multiple important dates.

Disabled Calendar

The disabled property is used to disable the entire calendar component. This prevents all user interactions while maintaining the visual display of the calendar.

Readonly Calendar

The readonly property is used in the calendar component to prevent users from selecting or altering dates. This guarantees that the displayed information remains stable and unchanged.

Accessibility

The Calendar component follows accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.

The accessibility compliance for the Calendar component is outlined below.

- All features of the component meet the requirement.

- Some features of the component do not meet the requirement.

- The component does not meet the requirement.

WAI-ARIA attributes

The Calendar component follows the WAI-ARIA patterns to meet accessibility requirements. The following ARIA attributes are used in the Calendar component:

Keyboard interaction

The Calendar component follows keyboard interaction guidelines, making it accessible for people who use assistive technologies (AT) and those who rely on keyboard navigation. The following keyboard shortcuts are supported: