Ej1 api migration in React Schedule component

17 Mar 202524 minutes to read

This topic shows the API equivalent of JS2 Scheduler component to be used, while migrating your project that uses JS1 Scheduler.

Scheduler

Properties

Behavior API in Essential® JS 1 API in Essential® JS 2
To change the display of days count in agenda view Property: daysInAgenda

<EJ.Schedule id="Schedule" currentView={ej.Schedule.CurrentView.Agenda} agendaViewSettings-daysInAgenda={5}>
</EJ.Schedule> 		Property: agendaDaysCount

<ScheduleComponent currentView='Agenda' agendaDaysCount={7}>
</ScheduleComponent>
Preventing deletion of appointment Property: allowDelete

<EJ.Schedule id="Schedule" allowDelete= {false}>
</EJ.Schedule> 		Not applicable
Allows dragging and dropping of appointments Property: allowDragAndDrop

<EJ.Schedule id="Schedule" allowDragAndDrop={true}>
</EJ.Schedule> 		Property: allowDragAndDrop

<ScheduleComponent allowDragAndDrop={true}>
</ScheduleComponent>
Enabling inline editing of appointments Property: allowInline

<EJ.Schedule id="Schedule" allowInline={true}>
</EJ.Schedule> 		Not applicable
Allow keyboard interactions Property: allowKeyboardNavigation

<EJ.Schedule id="Schedule" allowKeyboardNavigation={true}>
</EJ.Schedule> 		Property: allowKeyboardInteraction

<ScheduleComponent allowKeyboardInteraction={true}>
</ScheduleComponent>
Enable resizing of appointments Property: enableAppointmentResize

<EJ.Schedule id="Schedule" enableAppointmentResize={true}>
</EJ.Schedule> 		Property: allowResizing

<ScheduleComponent allowResizing={true}>
</ScheduleComponent>
Blocking time intervals Property: blockoutSettings

var blockData = {
enable: true,
dataSource: [{
BlockId: 101,
BlockStartTime: new Date(2014, 4, 5, 10, 00),
BlockEndTime: new Date(2014, 4, 5, 11, 00),
BlockSubject: "Service",
IsBlockAppointment: true
}],
id: "BlockId",
startTime: "BlockStartTime",
endTime: "BlockEndTime",
subject: "BlockSubject",
isBlockAppointment: "IsBlockAppointment"
};
var Scheduler = React.createClass({
render: function () {
return (
<EJ.Schedule id="Schedule" currentDate={new Date(2017, 5, 5)} blockoutSettings={blockData}>
</EJ.Schedule>
);
}
}); 		Not applicable
Categorizing the appointments Property: categorizeSettings

var dataManager = [{
Id: 1,
Subject: "Testing",
StartTime: new Date("2015/11/7 09:00 AM"),
EndTime: new Date("2015/11/7 10:00 AM"),
categorize: "1",
}];
var categorizeData = {
enable: true,
allowMultiple: true,
dataSource: [
{ text: "Blue Category", id: 1, color: "#43b496", fontColor: "#ffffff" }],
text: "text",id: "id",color: "color"fontColor: "fontColor"
};
var Scheduler = React.createClass({
render: function () {
return (
<EJ.Schedule id="Schedule" currentDate={new Date(2017, 5, 5)} categorizeSettings={categorizeData} appointmentSettings-dataSource={dataManager}>
</EJ.Schedule>
);
}
}); 		Not applicable
Setting cell height Property: cellHeight

<EJ.Schedule id="Schedule" cellHeight ="30px">
</EJ.Schedule> 		Not applicable
Cell template Property: workCellsTemplateId

<EJ.Schedule id="Schedule" allDayCellsTemplateId="#allDayTemplate" workCellsTemplateId="#workTemplate">
</EJ.Schedule> 		Property: cellTemplate

<ScheduleComponent cellTemplate={this.cellTemplate.bind(this)}>
</ScheduleComponent>
Setting cell width Property: cellWidth

<EJ.Schedule id="Schedule" cellWidth="30px">
</EJ.Schedule> 		Not applicable
CSS class Property: cssClass

<EJ.Schedule id="Schedule" cssClass="customStyle">
</EJ.Schedule>
 Property: cssClass

<ScheduleComponent cssClass= 'customStyle'>
</ScheduleComponent>
Enabling Context-menu option Property: contextMenuSettings

var contextMenuData = {
enable: true,
menuItems: {
appointment: [
{ id: "open", text: "Open Appointment" },
{ id: "delete", text: "Delete Appointment" }
]
}
};
var Scheduler = React.createClass({
render: function () {
return (
<EJ.Schedule id="Schedule" currentDate={new Date(2017, 5, 5)} contextMenuSettings={contextMenuData}>
</EJ.Schedule>
);
}
}); 		Not applicable
Current view Property: currentView

<EJ.Schedule id="Schedule" currentView={ej.Schedule.CurrentView.Workweek}>
</EJ.Schedule> 		Property: currentView

<ScheduleComponent currentView= "WorkWeek">
</ScheduleComponent>
Date format Property: dateFormat

<EJ.Schedule id="Schedule" dateFormat="yyyy/MM/dd">
</EJ.Schedule> 		Property: dateFormat

<ScheduleComponent dateFormat= "yyyy/MM/dd">
</ScheduleComponent>
Date header template Property: dateHeaderTemplateId

<EJ.Schedule id="Schedule" dateHeaderTemplateId="#dateTemplate">
</EJ.Schedule> 		Property: dateHeaderTemplate

<ScheduleComponent dateHeaderTemplate={this.dateHeaderTemplate.bind(this)}>
</ScheduleComponent>
Editor template Not Applicable Property: editorTemplate

<ScheduleComponent editorTemplate={this.editorTemplate.bind(this)}>
</ScheduleComponent>
Enable load on demand Property: enableLoadOnDemand

<EJ.Schedule id="Schedule" enableLoadOnDemand= {true}>
</EJ.Schedule> 		Not applicable
Enable persistence Property: enablePersistence

<EJ.Schedule id="Schedule" enablePersistence= {true}>
</EJ.Schedule> 		Property: enablePersistence

<ScheduleComponent enablePersistence= {true}>
</ScheduleComponent>
Enable RTL Property: enableRTL

<EJ.Schedule id="Schedule" enableRTL= {true}>
</EJ.Schedule> 		Property: enablePersistence

<ScheduleComponent enableRTL= {true}>
</ScheduleComponent>
Setting end hour of the scheduler Property: endHour

<EJ.Schedule id="Schedule" endHour={18}>
</EJ.Schedule> 		Property: endHour

<ScheduleComponent endHour= '20:00'>
</ScheduleComponent>
Setting first day of the week Property: firstDayOfWeek

<EJ.Schedule id="Schedule" firstDayOfWeek={ej.Schedule.FirstDayOfWeek.Tuesday}>
</EJ.Schedule> 		Property: firstDayOfWeek

<ScheduleComponent firstDayOfWeek={1}>
</ScheduleComponent>
Height of the scheduler Property: height

<EJ.Schedule id="Schedule" height="550px">
</EJ.Schedule> 		Property: height

<ScheduleComponent height="550px">
</ScheduleComponent>
Locale Property: locale

<EJ.Schedule id="Schedule" locale="fr-CH">
</EJ.Schedule>
 Property: locale

<ScheduleComponent locale='fr-CH'>
</ScheduleComponent>
Priority settings for appointments Property: PrioritySettings

var priorityData = {
enable: true,
dataSource: [
{ text: "None", value: "none" },
{ text: "Low", value: "low" }],
text: "text",
value: "value"
};
var Scheduler = React.createClass({
render: function () {
return (
<EJ.Schedule id="Schedule" prioritySettings={priorityData}>
</EJ.Schedule>
);
}
}); 		Not applicable
Read only Property: readOnly

<EJ.Schedule id="Schedule" width="100%" height="550px" readOnly={true}>
</EJ.Schedule>
 Property: readonly

<ScheduleComponent readonly={true}>
</ScheduleComponent>
Reminder settings Property: reminderSettings

var reminderData = {
enable: true,
alertBefore: 10
};
<EJ.Schedule id="Schedule" reminderSettings={reminderData}>
</EJ.Schedule> 		Not applicable
Resource header template Property: resourceHeaderTemplateId

var groupData = {
resources: ["Rooms"] };
var roomData = {
dataSource: [
{ ResourceText: "ROOM1", id: 1, ResourceColor: "orange" }],
text: "ResourceText", id: "id", color: "ResourceColor"};
var Scheduler = React.createClass({
render: function () {
return (
<EJ.Schedule id="Schedule" group={groupData} resourceHeaderTemplateId="#resTemplate" appointmentSettings-resourceFields="RoomId">
<resources>
<resource allowMultiple={false} field="RoomId" title="Room" name="Rooms" resourceSettings={roomData}>
</resource>
</resources>
</EJ.Schedule>
);
}
}); 		Property: resourceHeaderTemplate

private projectData: Object[] = [
{ text: 'PROJECT 1', id: 1, color: '#cb6bb2' }];
<ScheduleComponent group={ { resources: ['Projects'] } } resourceHeaderTemplate={this.resourceHeaderTemplate.bind(this)}>
<ResourcesDirective>
<ResourceDirective field='ProjectId' title='Choose Project' name='Projects' dataSource={this.projectData} textField='text' idField='id' colorField='color'>
</ResourceDirective>
</ResourcesDirective>
</ScheduleComponent>
Current date of the scheduler Property: currentDate

<EJ.Schedule id="Schedule" currentDate={new Date(2017, 5, 5)}>
</EJ.Schedule>
 Property: selectedDate

<ScheduleComponent selectedDate={new Date(2018, 5, 5)}>
</ScheduleComponent>
Show all day row Property: showAllDayRow

<EJ.Schedule id="Schedule" width="100%" height="550px" showAllDayRow={false}>
</EJ.Schedule> 		Not applicable
Show appointment navigator Property: showAppointmentNavigator

<EJ.Schedule id="Schedule" showAppointmentNavigator={false}>
</EJ.Schedule> 		Not applicable
Show delete confirmation dialog Property: showDeleteConfirmationDialog

<EJ.Schedule id="Schedule" showDeleteConfirmationDialog={false}>
</EJ.Schedule> 		Not applicable
Show header bar Property: showHeaderBar

<EJ.Schedule id="Schedule" showHeaderBar={false}>
</EJ.Schedule> 		Property: showHeaderBar

<ScheduleComponent showHeaderBar={false}>
</ScheduleComponent>
Show location field in event window Property: showLocationField

<EJ.Schedule id="Schedule" showLocationField={false}>
</EJ.Schedule> 		Not applicable
Show time zone fields in event window Property: showTimeZoneFields

<EJ.Schedule id="Schedule" showTimeZoneFields={false}>
</EJ.Schedule> 		Not applicable
Show previous and next month dates in month view Property: showNextPrevMonth

<EJ.Schedule id="Schedule" showNextPrevMonth={false}>
</EJ.Schedule> 		Not applicable
Show overflow button Property: showOverflowButton

<EJ.Schedule id="Schedule" showOverflowButton={false}>
</EJ.Schedule> 		Not applicable
Show quick popup Property: showQuickWindow

<EJ.Schedule id="Schedule" showQuickWindow={false}>
</EJ.Schedule> 		Property: showQuickInfo

<ScheduleComponent showQuickInfo={false}>
</ScheduleComponent>
Show current time indicator Property: showCurrentTimeIndicator

<EJ.Schedule id="Schedule" showCurrentTimeIndicator={false}>
</EJ.Schedule> 		Property: showTimeIndicator

<ScheduleComponent showTimeIndicator={false}>
</ScheduleComponent>
Show week number Not Applicable Property: showWeekNumber

<ScheduleComponent showWeekNumber={false}>
</ScheduleComponent>
Show weekend days Property: showWeekend

<EJ.Schedule id="Schedule" showWeekend={false}>
</EJ.Schedule> 		Property: showWeekend

<ScheduleComponent showWeekend={false}>
</ScheduleComponent>
Setting start hour of the scheduler Property: startHour

<EJ.Schedule id="Schedule" startHour={7}>
</EJ.Schedule> 		Property: startHour

<ScheduleComponent startHour= '15:00'>
</ScheduleComponent>
Setting time mode on scheduler Property: timeMode

<EJ.Schedule id="Schedule" timeMode={ej.Schedule.TimeMode.Hour24}>
</EJ.Schedule> 		Not applicable
Setting timezone for scheduler Property: timeZone

<EJ.Schedule id="Schedule" timeZone="UTC +05:30">
</EJ.Schedule> 		Property: timezone

<ScheduleComponent timezone='UTC'>
</ScheduleComponent>
Views in scheduler Property: views

<EJ.Schedule id="Schedule" views={["Day", "Week", "WorkWeek", "Month", "CustomView"]}>
</EJ.Schedule> 		Property: views

<ScheduleComponent>
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
<ViewDirective option='Month' />
</ViewsDirective>
</ScheduleComponent>
Width of the scheduler Property: width

<EJ.Schedule id="Schedule" width="100%">
</EJ.Schedule> 		Property: width

<ScheduleComponent width="100%">
</ScheduleComponent>
Working days Property: workWeek

<EJ.Schedule id="Schedule" workWeek={["Tuesday", "Wednesday", "Thursday", "Friday","Saturday"]}>
</EJ.Schedule> 		Property: workDays

<ScheduleComponent workDays= {[1, 2, 4, 5]}>
</ScheduleComponent>
Working hours Property: workHours

var workHourData = {
highlight: true,
start: 8,
end: 16
};
var Scheduler = React.createClass({
render: function () {
return (
<EJ.Schedule id="Schedule" width="100%" height="525px" workHours={workHourData} currentDate={new Date(2017, 5, 5)} >
</EJ.Schedule>
);
}
}); 		Property: workHours

<ScheduleComponent workHours= { {
highlight: true, start: '11:00', end: '20:00' } }>
</ScheduleComponent>

Resources

Behavior API in Essential® JS 1 API in Essential® JS 2
To define resource datasource Property: resources

var roomData = {
dataSource: [
{ ResourceText: "ROOM1", id: 1, ResourceColor: "orange" }],
text: "ResourceText", id: "id", color: "ResourceColor"};
var Scheduler = React.createClass({
render: function () {
return (
<EJ.Schedule id="Schedule" appointmentSettings-resourceFields="RoomId">
<resources>
<resource allowMultiple={false} field="RoomId" title="Room" name="Rooms" resourceSettings={roomData}>
</resource>
</resources>
</EJ.Schedule>
);
}
}); 		Property: resources

private projectData: Object[] = [
{ text: 'PROJECT 1', id: 1, color: '#cb6bb2' }];
<ScheduleComponent>
<ResourcesDirective>
<ResourceDirective field='ProjectId' title='Choose Project' name='Projects' dataSource={this.projectData} textField='text' idField='id' colorField='color'>
</ResourceDirective>
</ResourcesDirective>
</ScheduleComponent>
Allowing multiple selection of resources in event window Property: allowMultiple

var groupData = { resources: ["Rooms, Owners"] };
var roomData = {
dataSource: [
{ text: "ROOM 1", id: 1, groupId: 1, color: "#cb6bb2" },
{ text: "ROOM 2", id: 2, groupId: 1, color: "#56ca85" }],
text: "text", id: "id", groupId: "groupId", color: "color"};
var ownerData = {
dataSource: [
{ text: "Nancy", id: 1, groupId: 1, color: "#ffaa00" },
{ text: "Steven", id: 3, groupId: 2, color: "#f8a398"}],
text: "text", id: "id", groupId: "groupId", color: "color"};
var Scheduler = React.createClass({
render: function () {
return (
<EJ.Schedule id="Schedule" group={groupData} appointmentSettings-resourceFields= "RoomId,OwnerId">
<resources>
<resource allowMultiple={false} field="RoomId" title="Room" name="Rooms" resourceSettings={roomData}>
</resource>
<resource allowMultiple={true} field="OwnerId" title="Owner" name="Owners" resourceSettings={ownerData}>
</resource>
</resources>
</EJ.Schedule>
);
}
}); 		Property: allowMultiple

private projectData: Object[] = [
{ text: 'PROJECT 1', id: 1, color: '#cb6bb2'},
{ text: 'PROJECT 2', id: 2, color: '#df5286'}];
private categoryData: Object[] = [
{ text: 'Category 1', id: 1, color: '#cb6bb2' }
{ text: 'Category 2', id: 2, color: '#df5286'}];
<ScheduleComponent group={ { resources: ['Projects', 'Categories'] } }>
<ResourcesDirective>
<ResourceDirective field='ProjectId' title='Choose Project' name='Projects' allowMultiple={true} dataSource={this.projectData} textField='text' idField='id' colorField='color'>
</ResourceDirective>
<ResourceDirective field='CategoryId' title='Choose Category' name='Categories' allowMultiple={true} dataSource={this.categoryData} textField='text' idField='id' colorField='color'>
</ResourceDirective>
</ResourcesDirective>
</ScheduleComponent>
Setting different work hours for each resource

var groupData = {
resources: ["Rooms"] };
var roomData = {
dataSource: [
{ text: "ROOM 1", id: 1, groupId: 1, color: "#cb6bb2", on: 10, off: 18, customDays: ["monday", "wednesday", "friday"] }
],
text: "text", id: "id", groupId: "groupId", color: "color", start: "on", end: "off", workWeek: "customDays"};
var Scheduler = React.createClass({
render: function () {
return (
<EJ.Schedule id="Schedule" group={groupData} appointmentSettings-resourceFields= "RoomId">
<resources>
<resource allowMultiple={false} field="RoomId" title="Room" name="Rooms" resourceSettings={roomData}>
</resource>
</resources>
</EJ.Schedule>
);
}
}); 		private projectData: Object[] = [
{ text: 'PROJECT 1', id: 1, color: '#cb6bb2', , workDays: [1, 3, 5], startHour: '08:00', endHour: '17:00' }];
<ScheduleComponent group={ { resources: ['Projects'] } }>
<ResourcesDirective>
<ResourceDirective field='ProjectId' title='Choose Project' name='Projects' allowMultiple={true} dataSource={this.projectData} textField='text' idField='id' colorField='color' workDaysField='workDays' startHourField='startHour' endHourField='endHour'>
</ResourceDirective>
</ResourcesDirective>
</ScheduleComponent>

Group

Behavior API in Essential® JS 1 API in Essential® JS 2
To group the resources in scheduler layout Property: group

var groupData = {
resources: ["Rooms"] };
var roomData = {
dataSource: [
{ ResourceText: "ROOM1", id: 1, ResourceColor: "orange" }],
text: "ResourceText", id: "id", color: "ResourceColor"};
var Scheduler = React.createClass({
render: function () {
return (
<EJ.Schedule id="Schedule" group={groupData} appointmentSettings-resourceFields="RoomId">
<resources>
<resource allowMultiple={false} field="RoomId" title="Room" name="Rooms" resourceSettings={roomData}>
</resource>
</resources>
</EJ.Schedule>
);
}
}); 		Property: group

private projectData: Object[] = [
{ text: 'PROJECT 1', id: 1, color: '#cb6bb2' }];
<ScheduleComponent group={ { resources: ['Projects'] } }>
<ResourcesDirective>
<ResourceDirective field='ProjectId' title='Choose Project' name='Projects' dataSource={this.projectData} textField='text' idField='id' colorField='color'>
</ResourceDirective>
</ResourcesDirective>
</ScheduleComponent>
Allow group editing Property: allowGroupEditing

var groupData = {
resources: ["Rooms"],
allowGroupEdit: true };
var roomData = {
dataSource: [
{ ResourceText: "ROOM1", id: 1, ResourceColor: "orange" }],
text: "ResourceText", id: "id", color: "ResourceColor"};
var Scheduler = React.createClass({
render: function () {
return (
<EJ.Schedule id="Schedule" group={groupData} appointmentSettings-resourceFields="RoomId">
<resources>
<resource allowMultiple={false} field="RoomId" title="Room" name="Rooms" resourceSettings={roomData}>
</resource>
</resources>
</EJ.Schedule>
);
}
}); 		Property: allowGroupEdit

private projectData: Object[] = [
{ text: 'PROJECT 1', id: 1, color: '#cb6bb2' }];
<ScheduleComponent group={ { allowGroupEdit: true, resources: ['Projects'] } }>
<ResourcesDirective>
<ResourceDirective field='ProjectId' title='Choose Project' name='Projects' dataSource={this.projectData} textField='text' idField='id' colorField='color'>
</ResourceDirective>
</ResourcesDirective>
</ScheduleComponent>
Grouping resources by date Not applicable Property: byDate

private projectData: Object[] = [
{ text: 'PROJECT 1', id: 1, color: '#cb6bb2' }];
<ScheduleComponent group={ { byDate: true, resources: ['Projects'] } }>
<ResourcesDirective>
<ResourceDirective field='ProjectId' title='Choose Project' name='Projects' dataSource={this.projectData} textField='text' idField='id' colorField='color'>
</ResourceDirective>
</ResourcesDirective>
</ScheduleComponent>
Grouping resources based on its group ID Not applicable Property: byGroupId

private projectData: Object[] = [
{ text: 'PROJECT 1', id: 1, color: '#cb6bb2'},
{ text: 'PROJECT 2', id: 2, color: '#56ca85'}];
private categoryData: Object[] = [
{ text: 'Development', id: 1, groupId: 1, color: '#7fa900' },
{ text: 'Testing', id: 2, groupId: 2, color: '#56ca85' },
{ text: 'Documentation', id: 3, groupId: 2, color: '#7499e1' }];
<ScheduleComponent group={ { byGroupID: true, resources: ['Projects', 'Categories' ] } }>
<ResourcesDirective>
<ResourceDirective field='ProjectId' title='Choose Project' name='Projects' dataSource={this.projectData} textField='text' idField='id' groupIDField: 'groupId' colorField='color'>
</ResourceDirective>
<ResourceDirective field='CategoryId' title='Category' name='Categories' allowMultiple={true} dataSource={this.categoryData} textField='text' idField='id' groupIDField: 'groupId' colorField='color'>
</ResourceDirective>
</ResourcesDirective>
</ScheduleComponent>
Enabling compact view on mobile mode Not applicable Property: enableCompactView

private projectData: Object[] = [
{ text: 'PROJECT 1', id: 1, color: '#cb6bb2' }];
<ScheduleComponent group={ { enableCompactView: false, resources: ['Projects'] } }>
<ResourcesDirective>
<ResourceDirective field='ProjectId' title='Choose Project' name='Projects' dataSource={this.projectData} textField='text' idField='id' colorField='color'>
</ResourceDirective>
</ResourcesDirective>
</ScheduleComponent>
Header tooltip template Not applicable Property: headerTooltipTemplate

private projectData: Object[] = [
{ text: 'PROJECT 1', id: 1, color: '#cb6bb2' }];
<ScheduleComponent headerTooltipTemplate:{this.resourceHeaderTemplate.bind(this)} group={ { resources: ['Projects'] } }>
<ResourcesDirective>
<ResourceDirective field='ProjectId' title='Choose Project' name='Projects' dataSource={this.projectData} textField='text' idField='id' colorField='color'>
</ResourceDirective>
</ResourcesDirective>
</ScheduleComponent>

Header Rows

Behavior API in Essential® JS 1 API in Essential® JS 2
Adding custom rows in the header in timeline views Not applicable Property: HeaderRows

<ScheduleComponent>
<HeaderRowsDirective>
<HeaderRowDirective option='Month' template={this.monthTemplate.bind(this)} />
<HeaderRowDirective option='Week' template={this.weekTemplate.bind(this)} />
<HeaderRowDirective option='Date' />
</HeaderRowsDirective>
< ViewsDirective >
<ViewDirective option='TimelineMonth' interval={12} />
</ViewsDirective>
</ScheduleComponent>

TimeScale

Behavior API in Essential® JS 1 API in Essential® JS 2
Enabling time scale Property: enable

var timeScaleData = {
enable: true };
var Scheduler = React.createClass({
render: function () {
return (
<EJ.Schedule id="Schedule" timeScale={timeScaleData} >
</EJ.Schedule>
);
}
}); 		Property: enable

<ScheduleComponent timeScale={ { enable: true } }>
</ScheduleComponent>
Setting major interval on time scale Property: majorSlot

var timeScaleData = {
enable: true, majorSlot: 60 };
var Scheduler = React.createClass({
render: function () {
return (
<EJ.Schedule id="Schedule" timeScale={timeScaleData} >
</EJ.Schedule>
);
}
}); 		Property: interval

<ScheduleComponent timeScale={ { enable: true, interval: 60 } }>
</ScheduleComponent>
Setting slot count on time scale Property: minorSlotCount

var timeScaleData = {
enable: true, majorSlot: 60, minorSlotCount: 6 };
var Scheduler = React.createClass({
render: function () {
return (
<EJ.Schedule id="Schedule" timeScale={timeScaleData} >
</EJ.Schedule>
);
}
}); 		Property: slotCount

<ScheduleComponent timeScale={ { enable: true, interval: 60, slotCount: 6 } }>
</ScheduleComponent>
Defining major slot template Property: majorSlotTemplateId

var timeScaleData = {
enable: true, majorSlot: 60, minorSlotCount: 6, majorSlotTemplateId: "#majorTemplate" };
var Scheduler = React.createClass({
render: function () {
return (
<EJ.Schedule id="Schedule" timeScale={timeScaleData} >
</EJ.Schedule>
);
}
}); 		Property: majorSlotTemplate

<ScheduleComponent timeScale={ { enable: true, interval: 60, slotCount: 6, majorSlotTemplate:this.majorSlotTemplate.bind(this) } }>
</ScheduleComponent>
Defining minor slot template Property: minorSlotTemplateId

var timeScaleData = {
enable: true, majorSlot: 60, minorSlotCount: 6, minorSlotTemplateId: "#minorTemplate" };
var Scheduler = React.createClass({
render: function () {
return (
<EJ.Schedule id="Schedule" timeScale={timeScaleData} >
</EJ.Schedule>
);
}
}); 		Property: minorSlotTemplate

<ScheduleComponent timeScale={ { enable: true, interval: 60, slotCount: 6, minorSlotTemplate:this.minorSlotTemplate.bind(this) } }>
</ScheduleComponent>

Quick info templates

Behavior API in Essential® JS 1 API in Essential® JS 2
Template for quick popup Not applicable Property: quickInfoTemplates

<ScheduleComponent quickInfoTemplates: { {
header:this.headerTemplate.bind(this),
content:this.contentTemplate.bind(this),
footer:this.footerTemplate.bind(this)
} }></ScheduleComponent>

Event settings

Behavior API in Essential® JS 1 API in Essential® JS 2
Datasource for events Property: dataSource

var dataManager = [{
Id: 1,
Subject: "Development",
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 15, 12, 30)
}];
var Scheduler = React.createClass({
render: function () {
return (
<EJ.Schedule id="Schedule" currentDate={new Date(2017, 5, 5)} appointmentSettings-dataSource={dataManager}>
</EJ.Schedule>
);
}
}); 		Property: dataSource

private data: object [] = [{
Id: 1,
Subject: 'Paris',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 15, 12, 30),
IsAllDay: false,
RecurrenceID: 10
}];
<ScheduleComponent eventSettings={ { dataSource: this.data} }>
</ScheduleComponent>
Appointment fields <EJ.Schedule id="Schedule" currentDate={new Date(2017, 5, 5)} appointmentSettings-dataSource={
id: "Id",
subject: "Subject",
startTime: "StartTime",
endTime: "EndTime",
description: "Description",
allDay: "AllDay",
recurrence: "Recurrence",
recurrenceRule: "RecurrenceRule">
</EJ.Schedule> 		Property: eventsSettings

private data: object [] = [{
Id: 1,
Subject: 'Paris',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 15, 12, 30),
IsAllDay: false,
RecurrenceID: 10
}];
<ScheduleComponent eventSettings={ { dataSource: this.data,
fields: {
id: 'Id',
subject: { name: 'Subject' },
isAllDay: { name: 'IsAllDay' },
location: { name: 'Location' },
description: { name: 'Description' },
startTime: { name: 'StartTime' },
endTime: { name: 'EndTime' },
recurrenceID : { name: 'RecurrenceID' }
}
} }>
</ScheduleComponent>
Enabling tooltip for appointments Property: enable

var tooltipData = {
enable: true};
var Scheduler = React.createClass({
render: function () {
return (
<EJ.Schedule id="Schedule" tooltipSettings={tooltipData}>
</EJ.Schedule>
);
}
}); 		Property: enableTooltip

<ScheduleComponent eventSettings={ {dataSource: this.data, enableTooltip: true} }>
</ScheduleComponent>
Tooltip template for appointments Property: templateId

var tooltipData = {
enable: true,templateId: "#tooltipTemplate"};
var Scheduler = React.createClass({
render: function () {
return (
<EJ.Schedule id="Schedule" tooltipSettings={tooltipData}>
</EJ.Schedule>
);
}
});
Note: Here tooltip setting for events is maintained separately 		Property: tooltipTemplate

<ScheduleComponent eventSettings={ {dataSource: this.data, enableTooltip: true, tooltipTemplate: this.template.bind(this)} }>
</ScheduleComponent>
Template for appointments Property: appointmentTemplateId

<EJ.Schedule id="Schedule" appointmentTemplateId="#appTemplate">
</EJ.Schedule> 		Property: template

<ScheduleComponent eventSettings={ {dataSource: this.data, template:this.eventTemplate.bind(this)} }>
</ScheduleComponent>
Query Property: query

var dataManager = ej.DataManager({
url: "http://mvc.syncfusion.com/OdataServices/Northwnd.svc/"
});
var queryManager = ej.Query().from("Events").take(10);
var Scheduler = React.createClass({
render: function () {
return (
<EJ.Schedule id="Schedule" appointmentSettings-dataSource={dataManager} appointmentSettings-query={queryManager}>
</EJ.Schedule>
);
}
}); 		Property: query

private dataManger: DataManager = new DataManager({
url: 'https://services.syncfusion.com/react/production/api/Schedule',
adaptor: new ODataAdaptor
});
<ScheduleComponent eventSettings={ { dataSource: this.dataManger, query: new Query().addParams('ej2schedule', 'true') } }>
</ScheduleComponent>
Define which resource level color applied to events Not applicable Property: resourceColorField

public roomData: Object[] = [
{ RoomText: 'ROOM 1', Id: 1, RoomGroupId: 1, RoomColor: '#cb6bb2' }
];
public ownerData: Object[] = [
{ OwnerText: 'OWNER 1', Id: 1, OwnerGroupId: 1, OwnerColor: '#cb6bb2' }
];
<ScheduleComponent eventSettings= { { resourceColorField: 'Owners' } }
group={ { resources: ['Rooms', 'Owners'] } } >
<ResourcesDirective>
<ResourceDirective field='RoomId' title='Room' name='Rooms' allowMultiple={false} dataSource={this.roomData} textField='RoomText' idField='Id' groupIDField= 'RoomGroupId' colorField='RoomColor'>
</ResourceDirective>
<ResourceDirective field='OwnerId' title='Owner' name='Owners' allowMultiple={true} dataSource={this.ownerData} textField='OwnerText' idField='Id' groupIDField= 'OwnerGroupId' colorField='OwnerColor'>
</ResourceDirective>
</ResourcesDirective>
</ScheduleComponent>

Methods

Behavior API in Essential® JS 1 API in Essential® JS 2
To add appointments manually Method: saveAppointment()

<EJ.Schedule dataSource={window.scheduleData}>
</EJ.Schedule>
var data = {
Id: 1,
Subject: "Testing",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 12, 00)};
var scheduleobj = $("#Schedule").data("ejSchedule");
scheduleobj.saveAppointment(data); 		Method: addEvent()

<ScheduleComponent ref={schedule => this.scheduleObj = schedule}>
</ScheduleComponent>
public data: Object[]= {
Id: 1,
Subject: 'Testing',
StartTime: new Date(2018, 1, 11, 10, 0),
EndTime: new Date(2018, 1, 11, 11, 0),
IsAllDay: false};
this.scheduleObj.addEvent(data);
}
To add resources dynamically Method: addResource()

<EJ.Schedule dataSource={window.scheduleData}>
</EJ.Schedule>
var data = { text: "Paul", id: 1, groupId: 3, color: "#cc99ff" };
var index = 0;
var scheduleobj = $("#Schedule").data("ejSchedule");
scheduleobj.addResource(data, "Owners", index); 		Method: addResource()

<ScheduleComponent ref={schedule => this.scheduleObj = schedule}>
</ScheduleComponent>
public data: Object[]={ text: "Paul", id: 1, groupId: 3, color: "#cc99ff" };
public index = 0;
this.scheduleobj.addResource(data, "Owners", index);
databind Not applicable Method: dataBind()

<ScheduleComponent ref={schedule => this.scheduleObj = schedule}>
</ScheduleComponent>
this.scheduleObj.dataBind()
Delete appointment manually Method: deleteAppointment()

<EJ.Schedule dataSource={window.scheduleData}>
</EJ.Schedule>
var data = {
Id: 1,
Subject: "Testing",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 12, 00)};
var scheduleobj = $("#Schedule").data("ejSchedule");
scheduleobj.deleteAppointment(data); 		Method: deleteEvent()

<ScheduleComponent ref={schedule => this.scheduleObj = schedule}>
</ScheduleComponent>
public data: Object[]= {
Id: 1,
Subject: "Testing",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 12, 00)};
this.scheduleobj.deleteEvent(data);
destroy scheduler Method: destroy()

<EJ.Schedule dataSource={window.scheduleData}>
</EJ.Schedule>
var scheduleobj = $("#Schedule").data("ejSchedule");
schdeuleObj.destroy(); 		Method: destroy()

<ScheduleComponent ref={schedule => this.scheduleObj = schedule}>
</ScheduleComponent>
this.scheduleObj.destroy()
Get cell details Method: getSlotByElement()

<EJ.Schedule dataSource={window.scheduleData}>
</EJ.Schedule>
var scheduleobj = $("#Schedule").data("ejSchedule");
var $td = $(".e-draggableworkarea table tr td").first();
var slotDetails =scheduleObj.getSlotByElement($td); 		Method: getCellDetails()

<ScheduleComponent ref={schedule => this.scheduleObj = schedule}>
</ScheduleComponent>
private td = document.querySelector(".e-work-cells");
private cellDetail = this.scheduleobj.getCellDetails(td);
Get current view appointments Method: getCurrentViewAppointments()

<EJ.Schedule dataSource={window.scheduleData}>
</EJ.Schedule>
var scheduleobj = $("#Schedule").data("ejSchedule");
var currApp= scheduleobj.getCurrentViewAppointments(); 		Method: getCurrentViewEvents()

<ScheduleComponent ref={schedule => this.scheduleObj = schedule}>
</ScheduleComponent>
private currApp= this.scheduleobj.getCurrentViewEvents();
Get entire appointment collection Method: getAppointments()

<EJ.Schedule dataSource={window.scheduleData}>
</EJ.Schedule>
var scheduleobj = $("#Schedule").data("ejSchedule");
var AppDetails = scheduleobj.getAppointments(); 		Method: getEvents()

<ScheduleComponent ref={schedule => this.scheduleObj = schedule}>
</ScheduleComponent>
public AppDetails= this.scheduleobj.getEvents();
Get current view dates Not applicable Method: getCurrentViewDates()

<ScheduleComponent ref={schedule => this.scheduleObj = schedule}>
</ScheduleComponent>
public AppDetails = this.scheduleobj.getCurrentViewDates();
Get event details Not applicable Method: getEventDetails()

public AppDetails = scheduleobj.getEventDetails(appElement);
<ScheduleComponent ref={schedule => this.scheduleObj = schedule}>
</ScheduleComponent>
Get occurrences using event ID Not applicable Method: getOccurrencesByID()

<ScheduleComponent ref={schedule => this.scheduleObj = schedule}>
</ScheduleComponent>
public recCollection = this.scheduleobj.getOccurrencesByID(1);
Get occurrences in the provided date range Not applicable Method: getOccurrencesByRange()

<ScheduleComponent ref={schedule => this.scheduleObj = schedule}>
</ScheduleComponent>
public sDate = new Date(2018, 1, 12);
public eDate = new Date(2018, 1, 17);
public resCollection = this.scheduleobj.getOccurrencesByRange(sDate, eDate);
Get resource details using index Not applicable Method: getResourceByIndex()

<ScheduleComponent ref={schedule => this.scheduleObj = schedule}>
</ScheduleComponent>
public resCollection = this.scheduleobj.getResourceByIndex(2);
Show spinner Not applicable Method: showSpinner()

<ScheduleComponent ref={schedule => this.scheduleObj = schedule}>
</ScheduleComponent>
this.scheduleObj.showSpinner()
Hide spinner Not applicable Method: hideSpinner()

<ScheduleComponent ref={schedule => this.scheduleObj = schedule}>
</ScheduleComponent>
this.scheduleObj.hideSpinner()
Check whether the time slot is available Not applicable Method: isSlotAvailble()

<ScheduleComponent ref={schedule => this.scheduleObj = schedule}>
</ScheduleComponent>
public sTime = new Date(2018, 1, 14, 09, 30);
public etime = new Date(2018, 1, 14, 10, 30);
public resCollection = this.scheduleobj.isSlotAvailble(sTime, eTime);
Open the event window manually Not applicable Method: openEditor()

<ScheduleComponent ref={schedule => this.scheduleObj = schedule}>
</ScheduleComponent>
public td = document.querySelector(".e-content-table tbody tr td");
public cellDetail = this.scheduleobj.getCellDetails(td);
this.scheduleobj.openEditor(cellDetail);
Refresh the scheduler Method: refresh()

<EJ.Schedule dataSource={window.scheduleData}>
</EJ.Schedule>
var scheduleobj = $("#Schedule").data("ejSchedule");
scheduleObj.refresh(); 		Method: refresh()

<ScheduleComponent ref={schedule => this.scheduleObj = schedule}>
</ScheduleComponent>
this.scheduleObj.refresh()
Refresh the events Method: refreshAppointments()

<EJ.Schedule dataSource={window.scheduleData}>
</EJ.Schedule>
var scheduleobj = $("#Schedule").data("ejSchedule");
scheduleObj.refreshAppointments(); 		Method: refreshEvents()

<ScheduleComponent ref={schedule => this.scheduleObj = schedule}>
</ScheduleComponent>
this.scheduleObj.refreshEvents()
Refresh the scroller Method: refreshScroller()

<EJ.Schedule dataSource={window.scheduleData}>
</EJ.Schedule>
var scheduleobj = $("#Schedule").data("ejSchedule");
schedule.refreshScroller() 		Not Applicable
To remove resources dynamically Method: removeResource()

<EJ.Schedule dataSource={window.scheduleData}>
</EJ.Schedule>
var resID = 1;
var scheduleobj = $("#Schedule").data("ejSchedule");
scheduleobj.removeResource(resID, "Owners"); 		Method: removeResource()

<ScheduleComponent ref={schedule => this.scheduleObj = schedule}>
</ScheduleComponent>
public data = { text: "Paul", id: 1, groupId: 3, color: "#cc99ff" };
public index = 0;
this.scheduleobj.removeResource(data, "Owners");
Export schedule as PDF Method: exportSchedule()

<EJ.Schedule dataSource={window.scheduleData}>
</EJ.Schedule>
var scheduleobj = $("#Schedule").data("ejSchedule");
scheduleobj.exportSchedule("ActionName","ExportToICS", null); 		Not Applicable
Export scheduler appointments in Excel file Method: exportToExcel()

<EJ.Schedule dataSource={window.scheduleData}>
</EJ.Schedule>
var scheduleobj = $("#Schedule").data("ejSchedule");
scheduleobj.exportToExcel("ActionName", null, true); 		Not Applicable
Print the scheduler Method: print()

<EJ.Schedule dataSource={window.scheduleData}>
</EJ.Schedule>
var scheduleobj = $("#Schedule").data("ejSchedule");
scheduleObj.print(); 		Not applicable
Filter appointments Method: filterAppointments()

<EJ.Schedule dataSource={window.scheduleData}>
</EJ.Schedule>
var scheduleobj = $("#Schedule").data("ejSchedule");
var filter = [{ field: "Subject", operator: "contains", value: "with", predicate: "or" }];
var filteredApp = scheduleobj.filterAppointments(filter); 		Not Applicable
Search appointments Method: searchAppointments()

<EJ.Schedule dataSource={window.scheduleData}>
</EJ.Schedule>
var scheduleobj = $("#Schedule").data("ejSchedule");
var searchApp = scheduleobj.searchAppointments("with"); 		Not applicable
To edit appointments manually Not applicable Method: saveEvent()

<ScheduleComponent ref={schedule => this.scheduleObj = schedule}>
</ScheduleComponent>
public data: Object[]= {
Id: 1,
Subject: 'Event Edited',
StartTime: new Date(2018, 1, 11, 10, 0),
EndTime: new Date(2018, 1, 11, 11, 0),
IsAllDay: false};
this.scheduleObj.saveEvent(data);
}
Setting work hours Not applicable Method: setWorkHours()

<ScheduleComponent ref={schedule => this.scheduleObj = schedule}>
</ScheduleComponent>
this.scheduleObj.setWorkHours([new Date(2017, 9, 5)], '04:00', '08:00')
Scrolling to specific time Not applicable Method: scrollTo()

<ScheduleComponent ref={schedule => this.scheduleObj = schedule}>
</ScheduleComponent>
this.scheduleObj.scrollTo('12:00')

Events

Behavior API in Essential® JS 1 API in Essential® JS 2
Fires on the beginning of each scheduler action Event: actionBegin

<EJ.Schedule actionBegin={onActionBegin}>
</EJ.Schedule>
function onActionBegin (args){} 		Event: actionBegin

<ScheduleComponent actionBegin ={onActionBegin}>
</ScheduleComponent>
function onActionBegin(args){}
Fires on the completion of each scheduler action Event: actionComplete

<EJ.Schedule actionComplete={onActionComplete}>
</EJ.Schedule>
function onActionComplete (args){} 		Event: actionComplete

<ScheduleComponent actionComplete ={onActionComplete}>
</ScheduleComponent>
function onActionComplete(args){}
Fires when the scheduler action gets failed Not applicable Event: actionFailure

<ScheduleComponent actionFailure ={onActionFailure}>
</ScheduleComponent>
function onActionFailure(args){}
Fires on appointment hover Event: appointmentHover

<EJ.Schedule appointmentHover={onAppointmentHover}>
</EJ.Schedule>
function onAppointmentHover (args){} 		Not applicable
Fires before an appointment gets created Event: beforeAppointmentCreate

<EJ.Schedule beforeAppointmentCreate={onBeforeAppointmentCreate}>
</EJ.Schedule>
function onBeforeAppointmentCreate (args){} 		Not applicable
Fires before an appointment gets edited Event: beforeAppointmentChange

<EJ.Schedule beforeAppointmentChange={OnBeforeAppointmentChange}>
</EJ.Schedule>
function OnBeforeAppointmentChange (args){} 		Not applicable
Fires before an appointment gets deleted Event: beforeAppointmentRemove

<EJ.Schedule beforeAppointmentRemove={OnBeforeAppointmentRemove}>
</EJ.Schedule>
function OnBeforeAppointmentRemove (args){} 		Not applicable
Fires before the context menu opens on scheduler Event: beforeContextMenuOpen

<EJ.Schedule beforeContextMenuOpen={OnBeforeContextMenuOpen}>
</EJ.Schedule>
function OnBeforeContextMenuOpen (args){} 		Not applicable
Fires on cell click Event: cellClick

<EJ.Schedule cellClick={OnCellClick}>
</EJ.Schedule>
function OnCellClick (args){} 		Event: cellClick

<ScheduleComponent cellClick ={OnCellClick}>
</ScheduleComponent>
function OnCellClick (args){}
Fires on cell double click Event: cellDoubleClick

<EJ.Schedule cellDoubleClick={oncellDoubleClick}>
</EJ.Schedule>
function oncellDoubleClick (args){} 		Event: cellClick

<ScheduleComponent cellDoubleClick ={oncellDoubleClick}>
</ScheduleComponent>
function oncellDoubleClick (args){}
Fires on cell hover Event: cellHover

<EJ.Schedule cellHover={onCellHover }>
</EJ.Schedule>
function onCellHover (args){} 		Not applicable
Fires once the scheduler is created Event: create

<EJ.Schedule create={onCreate}>
</EJ.Schedule>
function onCreate (args){} 		Event: created

<ScheduleComponent created ={onCreated}>
</ScheduleComponent>
function onCreated (args){}
Fires on data binding action Not applicable Event: dataBinding

<ScheduleComponent dataBinding ={onDataBinding}>
</ScheduleComponent>
function onDataBinding(args){}
Fires after the data is bound to the control Not applicable Event: dataBound

<ScheduleComponent dataBound ={onDataBound}>
</ScheduleComponent>
function onDataBound(args){}
Fires once the scheduler is destroyed Event: destroy

<EJ.Schedule destroy={onDestroy}>
</EJ.Schedule>
function onDestroy (args){} 		Event: destroyed

<ScheduleComponent destroyed ={onDestroyed}>
</ScheduleComponent>
function onDestroyed(args){}
Fires on event click Event: appointmentClick

<EJ.Schedule appointmentClick={onAppointmentClick}>
</EJ.Schedule>
function onAppointmentClick (args){} 		Event: eventClick

<ScheduleComponent eventClick ={onEventClick}>
</ScheduleComponent>
function onEventClick(args){}
Fires on event double click Event: appointmentDoubleClick

<EJ.Schedule appointmentDoubleClick={onAppointmentDoubleClick}>
</EJ.Schedule>
function onAppointmentDoubleClick (args){} 		Not applicable
Fires for keyboard actions Event: keyDown

<EJ.Schedule keyDown={onKeyDown}>
</EJ.Schedule>
function onKeyDown (args){} 		Not applicable
Fires on context menu item click Event: menuItemClick

<EJ.Schedule menuItemClick={onMenuItemClick}>
</EJ.Schedule>
function onMenuItemClick (args){} 		Not applicable
Fires on navigation Event: navigation

<EJ.Schedule navigation={onNavigation}>
</EJ.Schedule>
function onNavigation (args){} 		Event: navigating

<ScheduleComponent navigating ={onNavigating}>
</ScheduleComponent>
function onNavigating (args){}
Fires on popup open Event: appointmentWindowOpen

<EJ.Schedule appointmentWindowOpen={onAppointmentWindowOpen}>
</EJ.Schedule>
function onAppointmentWindowOpen (args){} 		Event: popupOpen

<ScheduleComponent popupOpen ={onPopupOpen}>
</ScheduleComponent>
function onPopupOpen (args){}
Fires on dragging event Event: drag

<EJ.Schedule drag={onDrag}>
</EJ.Schedule>
function onDrag (args){} 		Event: drag

<ScheduleComponent drag ={onDrag}>
</ScheduleComponent>
function onDrag (args){}
Fires on drag start Event: dragStart

<EJ.Schedule dragStart={onDragStart}>
</EJ.Schedule>
function onDragStart (args){} 		Event: dragStart

<ScheduleComponent dragStart ={onDragStart}>
</ScheduleComponent>
function onDragStart (args){}
Fires on drag stop Event: dragStop

<EJ.Schedule dragStop={onDragStop}>
</EJ.Schedule>
function onDragStop (args){} 		Event: dragStop

<ScheduleComponent dragStop ={onDragStop}>
</ScheduleComponent>
function onDragStop (args){}
Fires on overflow button click Event: overflowButtonClick

<EJ.Schedule overflowButtonClick={onOverflowButtonClick}>
</EJ.Schedule>
function onOverflowButtonClick (args){} 		Not applicable
Fires on overflow button hover Event: overflowButtonHover

<EJ.Schedule overflowButtonHover={onOverflowButtonHover}>
</EJ.Schedule>
function onOverflowButtonHover (args){} 		Not applicable
Fires when the reminder action takes place Event: reminder

<EJ.Schedule reminder={onReminder}>
</EJ.Schedule>
function onReminder (args){} 		Not applicable
Fires on resizing event Event: resize

<EJ.Schedule resize={onResize}>
</EJ.Schedule>
function onResize (args){} 		Event: resizeStart

<ScheduleComponent resize ={onResize}>
</ScheduleComponent>
function onResize (args){}
Fires on resize start Event: resizeStart

<EJ.Schedule resizeStart={onResizeStart}>
</EJ.Schedule>
function onResizeStart (args){} 		Event: resizeStart

<ScheduleComponent resizeStart ={onResizeStart}>
</ScheduleComponent>
function onResizeStart (args){}
Fires on resize stop Event: resizeStop

<EJ.Schedule resizeStop={onResizeStop}>
</EJ.Schedule>
function onResizeStop (args){} 		Event: resizeStop

<ScheduleComponent resizeStop ={onResizeStop}>
</ScheduleComponent>
function onResizeStop (args){}
Fires on rendering of every scheduler elements Event: queryCellInfo

<EJ.Schedule queryCellInfo={onQueryCellInfo}>
</EJ.Schedule>
function onQueryCellInfo (args){} 		Event: renderCell

<ScheduleComponent renderCell ={onRenderCell}>
</ScheduleComponent>
function onRenderCell (args){}
Fires before the event rendering on UI Not applicable Event: eventRendered

<ScheduleComponent eventRendered ={onEventRendered}>
</ScheduleComponent>
function onEventRendered (args){}

You can refer to our React Scheduler feature tour page for its groundbreaking feature representations. You can also explore our React Scheduler example to knows how to present and manipulate data.