React Migration in Scheduler Component

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

Properties

EJ2 ReactReactDescription

Prop: agendaDaysCount

<ScheduleComponent agendaDaysCount={1} />

Prop: agendaDaysCount

<Scheduler> <AgendaView agendaDaysCount={1} /> <Scheduler />

The agendaDaysCount prop exists in both EJ2 React and React.

Prop: allowDragAndDrop

<ScheduleComponent allowDragAndDrop={true} />

Prop: eventDrag

<Scheduler eventDrag={true} />

The allowDragAndDrop prop in EJ2 React is replaced by the eventDrag prop in React.

Prop: allowResizing

<ScheduleComponent allowResizing={true} />

Prop: eventResize

<Scheduler eventResize={true} />

The allowResizing prop in EJ2 React is replaced by the eventResize prop in React.

Prop: cellTemplate

<ScheduleComponent cellTemplate={'<div>Slot</div>'} />

Prop: cell


<Scheduler cell={<div>Slot</div>} />

The cellTemplate prop in EJ2 React is replaced by the cell prop in React.

Prop: cellHeaderTemplate

<ScheduleComponent cellHeaderTemplate={'<div>Day</div>'} />

Prop: cellHeader

<Scheduler cellHeader={<div>Day</div>} />

The cellHeaderTemplate props in EJ2 React map to cellHeader in React.

Prop: dateHeaderTemplate

<ScheduleComponent dateHeaderTemplate={'<div>Day</div>'} />

Prop: dateHeader

<Scheduler dateHeader={<div>Day</div>} />

The dateHeaderTemplate props in EJ2 React map to dateHeader in React.

Prop: cssClass

<ScheduleComponent cssClass="custom-sched" />

Prop: className

<Scheduler className="custom-sched" />

The cssClass prop in EJ2 React is replaced by the className prop in React.

Prop: currentView

<ScheduleComponent currentView="Week" />

Prop: defaultView (uncontrolled) / view (controlled)

<Scheduler defaultView="Week" /> const [view, setView] = useState<string>('Week'); const onViewChange = (event: SchedulerViewChangeEvent) => { setView(event.value); }; <Scheduler view={view} onViewChange={onViewChange}/>

The currentView prop in EJ2 React maps to defaultView or view in React.

Prop: dateFormat

<ScheduleComponent dateFormat="dd-MMM-yyyy" />

Prop: dateFormat

<Scheduler dateFormat="dd-MMM-yyyy" />

The dateFormat prop exists in both EJ2 React and React.

Prop: editorTemplate / editorHeaderTemplate / editorFooterTemplate

<ScheduleComponent editorTemplate={'<div>Editor</div>'} />

Prop: editor

const customEditor = (props: SchedulerEditorProps): ReactNode => { return ( <SchedulerEditorPopup dialogProps={{ header: {<div>Header</div>}, footer: {<div>Footer</div>} }} /> )} <Scheduler editor={customEditor} />

The editorTemplate and related EJ2 props are replaced by the editor prop in React.

Prop: enableRecurrenceValidation

<ScheduleComponent enableRecurrenceValidation={true} />

Prop: enableRecurrenceValidation

<Scheduler enableRecurrenceValidation={true} />

The enableRecurrenceValidation prop exists in both EJ2 React and React.

Prop: enableRtl

<ScheduleComponent enableRtl={true} />

Provider: dir (via Provider)

<Provider dir="rtl"><Scheduler /></Provider>

The enableRtl prop in EJ2 React is replaced by using a Provider with dir="rtl" in React.

Prop: group

const resources = [ { OwnerText: 'Nancy', Id: 1, OwnerColor: '#ffaa00' }, { OwnerText: 'Robert', Id: 2, OwnerColor: '#f8a398' } ]; <ScheduleComponent group={{ resources: ['Owners'] }}> <ResourcesDirective> <ResourceDirective field='OwnerId' title='Owner' name='Owners' dataSource={resources} textField='OwnerText' idField='Id' colorField='OwnerColor'> </ResourceDirective> </ScheduleComponent>

Prop: group

const resources = [{ name: 'Owners', field: 'OwnerId', title: 'Owner', textField: 'OwnerText', idField: 'Id', colorField: 'OwnerColor' dataSource: [ { OwnerText: 'Nancy', Id: 1, OwnerColor: '#ffaa00' }, { OwnerText: 'Robert', Id: 2, OwnerColor: '#f8a398' } ] }]; <Scheduler resources={resources} group={{ resources: ['Owners'] }} />

The group prop exists in both EJ2 React and React.

Prop: startHour / endHour

<ScheduleComponent startHour="08:00" endHour="18:00" />

Prop: startHour / endHour

<Scheduler startHour="08:00" endHour="18:00" />

The startHour and endHour props exist in both EJ2 React and React.

Prop: workHours

<ScheduleComponent workHours={{ start: '09:00', end: '18:00' }} />

Prop: workHours

<Scheduler workHours={{ start: '09:00', end: '18:00' }} />

The workHours props exist in both EJ2 React and React.

Prop: dateRangeTemplate

<ScheduleComponent dateRangeTemplate={'<div>Range</div>'} />

Prop: header.dateRangeTemplate

<Scheduler header={{ dateRangeTemplate: <div>Range</div> }} />

The dateRangeTemplate prop in EJ2 React maps to header.dateRangeTemplate in React.

Prop: timeScale

<ScheduleComponent timeScale={{ interval: 30, slotCount: 2 }} />

Prop: timeScale

<Scheduler timeScale={{ interval: 30, slotCount: 2 }} />

The timeScale props exist in both EJ2 React and React.

Prop: eventDragArea

<ScheduleComponent eventDragArea="body" />

Prop: eventDrag.eventDragArea

<Scheduler eventDrag={{ eventDragArea: 'body' }} />

The eventDragArea prop in EJ2 React is moved under eventDrag.eventDragArea in React.

Prop: eventSettings

<ScheduleComponent eventSettings={{ dataSource: [], fields: { id: 'Id' } }} />

Prop: eventSettings

<Scheduler eventSettings={{ dataSource: [], fields: { id: 'Id' } }} />

The eventSettings props exist in both EJ2 React and React.

Prop: firstDayOfWeek

<ScheduleComponent firstDayOfWeek={1} />

Prop: firstDayOfWeek

<Scheduler firstDayOfWeek={1} />

The firstDayOfWeek prop exists in both EJ2 React and React.

Prop: height

<ScheduleComponent height="600px" />

Prop: height

<Scheduler height="600px" />

The height prop exists in both EJ2 React and ReactNode.

Prop: hideEmptyAgendaDays

<ScheduleComponent hideEmptyAgendaDays={false} />

Prop: hideEmptyAgendaDays

<Scheduler> <AgendaView hideEmptyAgendaDays={false} /> <Scheduler />

The hideEmptyAgendaDays prop exists in both EJ2 React and React.

Prop: readonly

<ScheduleComponent readonly={true} />

Prop: readOnly

<Scheduler readOnly={true} />

The readonly prop in EJ2 React is replaced by the readOnly prop in React.

Prop: resources

const resources = [ { OwnerText: 'Nancy', Id: 1, OwnerColor: '#ffaa00' }, { OwnerText: 'Robert', Id: 2, OwnerColor: '#f8a398' } ]; <ScheduleComponent> <ResourcesDirective> <ResourceDirective field='OwnerId' title='Owner' name='Owners' dataSource={resources} textField='OwnerText' idField='Id' colorField='OwnerColor'> </ResourceDirective> </ScheduleComponent>

Prop: resources

const resources = [{ name: 'Owners', field: 'OwnerId', title: 'Owner', textField: 'OwnerText', idField: 'Id', colorField: 'OwnerColor' dataSource: [ { OwnerText: 'Nancy', Id: 1, OwnerColor: '#ffaa00' }, { OwnerText: 'Robert', Id: 2, OwnerColor: '#f8a398' } ] }]; <Scheduler resources={resources} />

The resources prop exists in both EJ2 React and React.

Prop: resourceHeaderTemplate

const ResourceHeaderTemplate = (props: SchedulerResourceHeaderProps) => { const name: string = props.resourceData.OwnerText; return ( <div className='resource-header-template'>{name}</div> ); }; const resources = [ { OwnerText: 'Nancy', Id: 1, OwnerColor: '#ffaa00' }, { OwnerText: 'Robert', Id: 2, OwnerColor: '#f8a398' } ]; <ScheduleComponent group={{ resources: ['Owners'] }} resourceHeader={ResourceHeaderTemplate}> <ResourcesDirective> <ResourceDirective field='OwnerId' title='Owner' name='Owners' dataSource={resources} textField='OwnerText' idField='Id' colorField='OwnerColor'> </ResourceDirective> </ScheduleComponent>

Prop: resourceHeader

const ResourceHeaderTemplate = (props: SchedulerResourceHeaderProps) => { const name: string = props.resourceData.OwnerText; return ( <div className='resource-header-template'>{name}</div> ); }; const resources = [{ name: 'Owners', field: 'OwnerId', title: 'Owner', textField: 'OwnerText', idField: 'Id', colorField: 'OwnerColor' dataSource: [ { OwnerText: 'Nancy', Id: 1, OwnerColor: '#ffaa00' }, { OwnerText: 'Robert', Id: 2, OwnerColor: '#f8a398' } ] }]; <Scheduler resources={resources} group={{ resources: ['Owners'] }} resourceHeader={ResourceHeaderTemplate} />

The resourceHeaderTemplate prop in EJ2 React is replaced by the resourceHeader prop in React.

Prop: rowAutoHeight

<ScheduleComponent rowAutoHeight={true} />

Prop: rowAutoHeight

<Scheduler rowAutoHeight={true} />

The rowAutoHeight prop exists in both EJ2 React and React.

Prop: selectedDate

<ScheduleComponent selectedDate={new Date(2025,0,1)} />

Prop: defaultSelectedDate (uncontrolled)
/ selectedDate (controlled)

<Scheduler defaultSelectedDate={new Date(2025,0,1)} /> const [selectedDate, setSelectedDate] = useState<Date>(new Date(2025, 6, 14)); const onSelectedDateChange = (event: SchedulerDateChangeEvent) => { setSelectedDate(event.value); }; <Scheduler selectedDate={selectedDate} onSelectedDateChange={onSelectedDateChange} />

The selectedDate prop maps to selectedDate or defaultSelectedDate in React.

Prop: showQuickInfo

<ScheduleComponent showQuickInfo={true} />

Prop: showQuickInfoPopup

<Scheduler showQuickInfoPopup={true} />

The showQuickInfo prop in EJ2 React is replaced by the showQuickInfoPopup prop in React.

Prop: showTimeIndicator

<ScheduleComponent showTimeIndicator={true} />

Prop: showTimeIndicator

<Scheduler showTimeIndicator={true} />

The showTimeIndicator prop exists in both EJ2 React and React.

Prop: showWeekend

<ScheduleComponent showWeekend={true} />

Prop: showWeekend

<Scheduler showWeekend={true} />

The showWeekend prop exists in both EJ2 React and React.

Prop: timeFormat

<ScheduleComponent timeFormat="hh:mm" />

Prop: timeFormat

<Scheduler timeFormat="hh:mm" />

The timeFormat prop exists in both EJ2 React and React.

Prop: timezone

<ScheduleComponent timezone="UTC" />

Prop: timezone

<Scheduler timezone="UTC" />

The timezone prop exists in both EJ2 React and React.

Prop: timezoneDataSource

const timezoneData = [ { Value: 'Pacific/Niue', Text: 'Niue' }, { Value: 'Pacific/Honolulu', Text: 'Hawaii Time' }, { Value: 'Pacific/Rarotonga', Text: 'Rarotonga' }, { Value: 'Pacific/Tahiti', Text: 'Tahiti' }, ]; <ScheduleComponent timezoneDataSource={timezoneData} />

Prop: timezoneDataSource

const timezoneData = [ { Value: 'Pacific/Niue', Text: 'Niue' }, { Value: 'Pacific/Honolulu', Text: 'Hawaii Time' }, { Value: 'Pacific/Rarotonga', Text: 'Rarotonga' }, { Value: 'Pacific/Tahiti', Text: 'Tahiti' }, ]; <Scheduler timezoneDataSource={timezoneData} />

The timezoneDataSource prop exists in both EJ2 React and React.

Prop: weekRule

<ScheduleComponent weekRule="FirstDay" />

Prop: weekRule

<Scheduler weekRule={WeekRule.FirstDay} />

The weekRule prop exists in both EJ2 React and React.

Prop: width

<ScheduleComponent width="100%" />

Prop: width

<Scheduler width="100%" />

The width prop exists in both EJ2 React and React.

Prop: workDays

<ScheduleComponent workDays={[1,2,3,4,5]} />

Prop: workDays

<Scheduler workDays={[1,2,3,4,5]} />

The workDays prop exists in both EJ2 React and React.

Events

EJ2 ReactReactDescription

Event: cellClick

<ScheduleComponent cellClick={(args) => {}} />

Event: onCellClick

<Scheduler onCellClick={(event) => {}} />

The cellClick event in EJ2 React is replaced by onCellClick in React.

Event: cellDoubleClick

<ScheduleComponent cellDoubleClick={(args) => {}} />

Event: onCellDoubleClick

<Scheduler onCellDoubleClick={(event) => {}} />

The cellDoubleClick event in EJ2 React is replaced by onCellDoubleClick in React.

Event: dataBinding

<ScheduleComponent dataBinding={(args) => {}} />

Event: onDataRequest

<Scheduler onDataRequest={(args) => {}} />

The dataBinding event in EJ2 React is replaced by onDataRequest in React.

Event: dragStart / drag / dragStop

<ScheduleComponent dragStart={() => {}} drag={() => {}} dragStop={() => {}} />

Events: onDragStart / onDrag / onDragStop

<Scheduler onDragStart={() => {}} onDrag={() => {}} onDragStop={() => {}} />

The dragStart/drag/dragStop events in EJ2 React map to onDragStart/onDrag/onDragStop in React.

Event: resizeStart / resizing / resizeStop

<ScheduleComponent resizeStart={() => {}} resizing={() => {}} resizeStop={() => {}} />

Events: onResizeStart / onResizing / onResizeStop

<Scheduler onResizeStart={() => {}} onResizing={() => {}} onResizeStop={() => {}} />

The resizeStart/resizing/resizeStop events in EJ2 React map to onResizeStart/onResizing/onResizeStop in React.

Event: eventClick / eventDoubleClick

<ScheduleComponent eventClick={(args) => {}} eventDoubleClick={(args) => {}} />

Events: onEventClick / onEventDoubleClick

<Scheduler onEventClick={(event) => {}} onEventDoubleClick={(event) => {}} />

The eventClick/eventDoubleClick events in EJ2 React are replaced by onEventClick/onEventDoubleClick in React.

Event: actionBegin

<ScheduleComponent actionBegin={(args) => {}} />

Event: onDataChangeStart

<Scheduler onDataChangeStart={(event) => {}} />

The actionBegin event in EJ2 React is replaced by onDataChangeStart in React.

Event: actionComplete

<ScheduleComponent actionComplete={(args) => {}} />

Event: onDataChangeComplete

<Scheduler onDataChangeComplete={(event) => {}} />

The actionComplete event in EJ2 React is replaced by onDataChangeComplete in React.

Event: tooltipOpen

<ScheduleComponent tooltipOpen={(args) => {}} />

Event: onTooltipOpen

<Scheduler onTooltipOpen={(args) => {}} />

The tooltipOpen event in EJ2 React is replaced by onTooltipOpen in React.

Event: moreEventsClick

<ScheduleComponent moreEventsClick={(args) => {}} />

Event: onMoreEventsClick

<Scheduler onMoreEventsClick={(event) => {}} />

The moreEventsClick event in EJ2 React is replaced by onMoreEventsClick in React.

Event: error

<ScheduleComponent error={(err) => {}} />

Event: onError

<Scheduler onError={(err) => {}} />

The error event in EJ2 React is replaced by onError in React.

Event: editorSubmit

<ScheduleComponent editorSubmit={(args) => {}} />

Event: onEditorSubmit

<Scheduler onEditorSubmit={(args) => {}} />

The editorSubmit event in EJ2 React is replaced by onEditorSubmit in React.