React Migration in Calendar Component

This section explains how to migrate the Calendar component from EJ2 React to React. It provides a detailed comparison of APIs, including props, methods and events.

Properties

EJ2 React	React	Description
Props: `cssClass` `<CalendarComponent cssClass='e-Calendar'></CalendarComponent>`	Props: `className` `<Calendar className='sf-Calendar'></Calendar>`	The `cssClass` prop in EJ2 React is replaced by `className` in React.
Props: `dayHeaderFormat` `<CalendarComponent dayHeaderFormat={'Narrow'}></CalendarComponent>`	Props: `weekDaysFormat` `<Calendar weekDaysFormat={'Narrow'}></Calendar>`	The `dayHeaderFormat` prop in EJ2 React is replaced by `weekDaysFormat` in React.
Props: `depth` `<CalendarComponent depth='Month'/>`	Props: `depth` `<Calendar depth={CalendarView.Month} />`	The `depth` prop is supported in both EJ2 React and React.
Props: `enableRtl` `<CalendarComponent enableRtl={true}/>`	Props: `dir` `<Provider dir='rtl'><Calendar id="calendar"/></Provider>`	The `enableRtl` prop in EJ2 React is replaced by `dir` in React.
Props: `enabled` `<CalendarComponent enabled={true}></CalendarComponent>`	Props: `disabled` `<Calendar disabled={true}></Calendar>`	The `enabled` prop in EJ2 React is replaced by `disabled` in React.
Props: `firstDayOfWeek` `<CalendarComponent firstDayOfWeek={0}></CalendarComponent>`	Props: `firstDayOfWeek` `<Calendar firstDayOfWeek={0}></Calendar>`	The `firstDayOfWeek` prop is supported in both EJ2 React and React.
Props: `isMultiSelection` `<CalendarComponent isMultiSelection={true}></CalendarComponent>`	Props: `multiSelect` `<Calendar multiSelect={true}></Calendar>`	The `isMultiSelection` prop in EJ2 React is replaced by `multiSelect` in React.
Props: `locale` `<CalendarComponent locale='en-US'/>`	Props: `locale` `<Provider locale={'en-US'}> <Calendar id="calendar"/> <Provider>`	The `locale` prop is supported in both EJ2 React and React.
Props: `max` `<CalendarComponent max={new Date()}></CalendarComponent>`	Props: `maxDate` `<Calendar maxDate={new Date()}></Calendar>`	The `max` prop in EJ2 React is replaced by `maxDate` in React.
Props: `min` `<CalendarComponent min={new Date()}></CalendarComponent>`	Props: `minDate` `<Calendar minDate={new Date()}></Calendar>`	The `min` prop in EJ2 React is replaced by `minDate` in React.
Props: `showTodayButton` `<CalendarComponent showTodayButton={true}></CalendarComponent>`	Props: `showTodayButton` `<Calendar showTodayButton={true}></Calendar>`	The `showTodayButton` prop is supported in both EJ2 React and React.
Props: `start` `<CalendarComponent start={new Date()}></CalendarComponent>`	Props: `start` `<Calendar start={new Date()}></Calendar>`	The `start` prop is supported in both EJ2 React and React.
Props: `value` `const [selectedValue, setSelectedValue] = useState<string>(null); const onchange = (args: ChangedEventArgs): void => { setSelectedValue(args.value.toLocaleDateString()); } <CalendarComponent value={selectedValue} change={onchange}/>`	Props: `value` `const [selectedDate, setSelectedDate] = useState(new Date(2025, 12, 15)); const handleChange = (args: CalendarChangeEvent) => { setSelectedDate(args.value as Date); } <Calendar value={selectedDate} onChange={handleChange}/>`	The `value` prop is supported in both EJ2 React and React.
Props: `weekNumber` `<CalendarComponent weekNumber={true}></CalendarComponent>`	Props: `weekNumber` `<Calendar weekNumber={true}></Calendar>`	The `weekNumber` prop is supported in both EJ2 React and React.
Props: `weekRule` `<CalendarComponent weekRule={'FirstDay'}></CalendarComponent>`	Props: `weekRule` `<Calendar weekRule={WeekRule.FirstDay}></Calendar>`	The `weekRule` prop is supported in both EJ2 React and React.

Methods

EJ2 React	React	Description
Methods: `destroy` `<CalendarComponent id="calendar" ref={(scope) => { this.calendarObj = scope } /> constructor(props: {}) { this.calendarObj.destroy(); }}`	`useEffect(() => { return () => { console.log('destroyed'); }; }, []); <Calendar></Calendar>`	The `destroy` method in EJ2 React is replaced by a useEffect cleanup function in React to run logic on unmount.

Events

EJ2 React	React	Description
Events: `change` `<CalendarComponent change={handler} > </CalendarComponent>`	Events: `onChange` `<Calendar onChange={handler}></Calendar>`	The `change` event in EJ2 React is replaced by `onChange` in React.
Events: `navigated` `<CalendarComponent navigated={handler} > </CalendarComponent>`	Events: `onViewChange` `<Calendar onViewChange={handler}></Calendar>`	The `navigated` event in EJ2 React is replaced by `onViewChange` in React.
Events: `renderDayCell` `function disabledDate(args) { if (args.date.getDay() === 0 \|\| args.date.getDay() === 6) { args.isDisabled = true; } } <CalendarComponent renderDayCell={disabledDate}/>`	Events: `cellTemplate` `const customCellTemplate = (props: CalendarCellProps) => { if (view === CalendarView.Month) { return ( <CalendarCell> <div className="sf-custom-cell"> <span className="sf-day">{date.getDate()}</span> </div> </CalendarCell> ); } return null; }; <Calendar cellTemplate={customCellTemplate}/>`	The `renderDayCell` event in EJ2 React is replaced by `cellTemplate` in React for custom cell rendering.