EJ1 API Migration in React Scheduler

This topic shows the API equivalents for Essential® JS1 Scheduler to Essential® JS2 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){}

See also