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: `depth` `<CalendarComponent id="calendar" depth='Month'/>`	Props: `depth` `<Calendar depth={CalendarView.Month} />`	Sets the maximum level of view such as `month`, `year`, and `decade` in the `Calendar`. The `depth` view should be smaller than the start view to restrict navigation `depth`. In EJ2 React, this is specified as a string value (e.g., 'Month'), while in React it uses the typed enum `CalendarView.Month` for better type safety.
Props: `cssClass` `<CalendarComponent cssClass='e-Calendar'></CalendarComponent>`	Props: `className` `<Calendar className='sf-Calendar'></Calendar>`	The `cssClass` prop in EJ2 React is replaced with the standard React `className` prop in React.
Props: `enabled` `<CalendarComponent enabled={true}></CalendarComponent>`	Props: `disabled` `<Calendar disabled={true}></Calendar>`	The `enabled` property in EJ2 React has been renamed to `disabled` in React.
Props: `firstDayOfWeek` `<CalendarComponent firstDayOfWeek={0}></CalendarComponent>`	Props: `firstDayOfWeek` `<Calendar firstDayOfWeek={0}></Calendar>`	Specifies the `firstDayOfWeek` for the `Calendar`. Values range from 0 (Sunday) to 6 (Saturday). By default, the `firstDayOfWeek` is determined by the current culture's regional settings. This property behaves consistently in both EJ2 React and React implementations.
Props: `max` `<CalendarComponent max={new Date()}></CalendarComponent>`	Props: `maxDate` `<Calendar maxDate={new Date()}></Calendar>`	The `max` property in EJ2 React has been renamed to `maxDate` in React. This change aligns with standard React naming conventions.The `max` property in EJ2 React `Calendar` Component has been renamed to `maxDate` in React Calendar.
Props: `min` `<CalendarComponent min={new Date()}></CalendarComponent>`	Props: `minDate` `<Calendar minDate={new Date()}></Calendar>`	In the React Calendar component, the `min` property used in EJ2 React has been renamed to `minDate`. This update follows standard React naming conventions.
Props: `isMultiSelection` `<CalendarComponent isMultiSelection={true}></CalendarComponent>`	Props: `multiSelect` `<Calendar multiSelect={true}></Calendar>`	The `isMultiSelection` property in EJ2 React has been renamed to `multiSelect` in React.It specifies the option to enable multiple date selection in the Calendar.
Props: `showTodayButton` `<CalendarComponent showTodayButton={true}></CalendarComponent>`	Props: `showTodayButton` `<Calendar showTodayButton={true}></Calendar>`	The `showTodayButton` prop is supported in both EJ2 React and React. It specifies whether the today button is to be displayed or not.
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. It specifies the initial view of the Calendar when it is opened.
Props: `dayHeaderFormat` `<CalendarComponent dayHeaderFormat={'Narrow'}></CalendarComponent>`	Props: `weekDaysFormat` `<Calendar weekDaysFormat={'Narrow'}></Calendar>`	The `dayHeaderFormat` property in EJ2 React has been renamed to `weekDaysFormat` in React. This property specifies the format of day names displayed in the Calendar header. Supported formats include: `'Short' (Su)`, `'Narrow' (S)`, `'Abbreviated' (Sun)`, and `'Wide' (Sunday)`. The default format is `'Short'`. The default format is 'Short'.
Props: `weekNumber` `<CalendarComponent weekNumber={true}></CalendarComponent>`	Props: `weekNumber` `<Calendar weekNumber={true}></Calendar>`	The `weekNumber` prop is supported in both EJ2 React and React. It specifies whether the week number of the year is displayed in the Calendar.
Props: `weekRule` `<CalendarComponent weekRule={'FirstDay'}></CalendarComponent>`	Props: `weekRule` `<Calendar weekRule={WeekRule.FirstDay}></Calendar>`	The `weekRule` prop is supported in both EJ2 React and React. It specifies the rule for defining the first week of the year.

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 `destroyed` callback event in EJ2 React is not available in React components. Instead, use the cleanup function returned by React `useEffect` hook to execute logic on component unmount.

Events

EJ2 React	React	Description
Events: `change` `<CalendarComponent change={handler} > </CalendarComponent>`	Events: `onChange` `<Calendar onChange={handler}></Calendar>`	The `change()` event handler in EJ2 React `Calendar` has been renamed to `onChange()` in React.
Events: `navigated` `<CalendarComponent navigated={handler} > </CalendarComponent>`	Events: `onViewChange` `<Calendar onViewChange={handler}></Calendar>`	The `navigated()` event handler in EJ2 React `Calendar` has been renamed to `onViewChange()` in React. This change aligns with standard React event naming conventions.