Package Exports
- @syncfusion/react-calendars
- @syncfusion/react-calendars/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@syncfusion/react-calendars) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Syncfusion React Calendar Components
The Syncfusion React Calendar components for managing date and time with features like date formatting, inline editing, multiple (range) selection, range restriction, month and year selection, strict mode, and globalization.
React Calendar
The Calendar component provides a versatile and interactive date selection interface with support for multiple views, customizations, and selection modes. It is designed to handle a wide range of scheduling and planning use cases.
Key features
View Modes: Switch between month, year, and decade views using the start and depth properties to control the initial view and navigation depth.
Date Range Control: Restrict selectable dates using minDate and maxDate to ensure users can only choose valid dates within a defined range.
Custom Cell Templates: Use the cellTemplate property to customize the appearance of specific dates, including disabling dates to prevent selection.
Week Number Display: Enable the weekNumber property to show week numbers alongside calendar dates for better context in scheduling.
Multi-Date Selection: Activate the multiSelect property to allow users to select multiple non-consecutive dates, ideal for marking events or selecting custom date ranges.
React DatePicker
The DatePicker component offers a streamlined and customizable interface for selecting dates, supporting various formats, view modes, and styling options. It is ideal for forms, scheduling tools, and any application requiring precise date input.
Key features
Custom Date Formats: Display and receive date values in formats that suit your application using the format property, which supports standard date format patterns.
Read-Only Mode: Prevent user edits while displaying a selected date by enabling the readOnly property—useful for forms or scenarios where the date is system-generated.
View Modes: Navigate through Month, Year, and Decade views to provide flexible date selection experiences.
Custom Cell Templates: Highlight important dates, events, or special occasions using the cellTemplate property to apply custom styling, icons, or indicators.
Setup
To install Calendars and its dependent packages, use the following command,
npm install @syncfusion/react-calendars
Trusted by the world's leading companies
Support
Product support is available through following mediums.
- Support ticket - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
- Live chat
Changelog
Check the changelog here. Get minor improvements and bug fixes every week to stay up to date with frequent updates.
License and copyright
This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA. To acquire a license for React UI components, you can purchase or start a free 30-day trial.
A free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
See LICENSE FILE for more info.
© Copyright 2025 Syncfusion®, Inc. All Rights Reserved. The Syncfusion® Essential Studio® license and copyright applies to this distribution.