Calendar Component

The Calendar component renders a month/year/decade view for date selection, with features like min/max date, multi-select, custom cell templates, keyboard navigation, and localization.

Usage

To import and use the Calendar component in your application, use the following code snippet:

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

export default function App() {
return <Calendar />;
}

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

export default function App() {
return <Calendar />;
}

Demos

Explore the demos of the React Calendar component. Refer to this page.

Props

The following table outlines the props for the Calendar component:

Name	Type	Default	Description
cellTemplate	((props: CalendarCellProps) => node)	-	Specifies a custom template for rendering the content of each calendar cell. Can be a React node or a function that returns a React node.
defaultValue	Date \| Date[] \| null	-	Specifies the default selected date of the Calendar in uncontrolled mode.
depth	CalendarView	CalendarView.Month	Sets the most granular view the user can navigate down to. For example, a `depth` of `Year` prevents navigation to the `Month` view.
disableFutureDays	boolean	false	When `true`, disables all dates in the future relative to the current day.
disablePastDays	boolean	false	When `true`, disables all dates in the past relative to the current day.
disabled	boolean	false	When `true`, the component is disabled and non-interactive.
firstDayOfWeek	number	0	Specifies the first day of the week: `0` for Sunday, `1` for Monday, and so on. If not set, the first day is determined by the locale.
footerTemplate	((props: CalendarFooterProps) => node)	-	Specifies a custom template for the calendar footer. If not provided, a default footer with a 'Today' button is rendered.
headerTemplate	((props: CalendarHeaderProps) => node)	-	Specifies a custom template for the calendar header. If not provided, a default header with navigation controls is rendered.
maxDate	Date	new Date(2099, 11, 31)	Specifies the maximum date that can be selected in the Calendar.
minDate	Date	new Date(1900, 0, 1)	Specifies the minimum date that can be selected in the Calendar.
multiSelect	boolean	false	When `true`, enables the selection of multiple dates.
orientation	Orientation	Orientation.Vertical	Defines the layout orientation of the calendar.
readOnly	boolean	false	When `true`, the calendar value cannot be changed by user interaction.
showDaysOutsideCurrentMonth	boolean	true	When `true`, shows dates from the previous and next months in the current month's view.
showTodayButton	boolean	true	When `true`, displays the 'Today' button in the footer.
showToolBar	boolean	false	When `true`, an additional toolbar is displayed, typically for showing the full selected date.
start	CalendarView	CalendarView.Month	Specifies the initial view that the calendar renders.
value	Date \| Date[] \| null	-	Specifies the selected date of the Calendar in controlled mode.
weekDaysFormat	WeekDaysFormats	WeekDaysFormats.Short	Specifies the format of the day names to be displayed in the week header.
weekNumber	boolean	false	When `true`, displays the week number of the year in the month view.
weekRule	WeekRule	WeekRule.FirstDay	Specifies the rule for defining the first week of the year.

Events

The following table outlines the events for the Calendar component:

Name	Type	Description
onChange	(event: CalendarChangeEvent) => void	Triggers when the calendar's `value` is changed through user interaction.
onViewChange	(event: ViewChangeEvent) => void	Triggers when the calendar navigates to a new view or date range.