JavaScript
Demos
Support
Forum
Download
Search results

Migration from Essential JS 1

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

var scheduleObj = new ej.Schedule($("#Schedule"), {
currentView: "Agenda",
daysInAgenda: 7
});		 Property: agendaDaysCount

let scheduleObj: Schedule = new Schedule({
currentView: 'Agenda',
agendaDaysCount: 7
});
scheduleObj.appendTo('#Schedule');
Preventing deletion of appointment Property: allowDelete

var scheduleObj = new ej.Schedule($("#Schedule"), {
allowDelete: false
});		 Not applicable
Allows dragging and dropping of appointments Property: allowDragAndDrop

var scheduleObj = new ej.Schedule($("#Schedule"), {
allowDragAndDrop: false
});		 Property: allowDragAndDrop

let scheduleObj: Schedule = new Schedule({
allowDragAndDrop: false
});
scheduleObj.appendTo('#Schedule');
Enabling inline editing of appointments Property: allowInline

var scheduleObj = new ej.Schedule($("#Schedule"), {
allowInline: true
});		 Not applicable
Allow keyboard interactions Property: allowKeyboardNavigation

var scheduleObj = new ej.Schedule($("#Schedule"), {
allowKeyboardNavigation: false
});		 Property: allowKeyboardInteraction

let scheduleObj: Schedule = new Schedule({
allowKeyboardInteraction: false
});
scheduleObj.appendTo('#Schedule');
Enable resizing of appointments Property: enableAppointmentResize

var scheduleObj = new ej.Schedule($("#Schedule"), {
enableAppointmentResize: true
});		 Property: allowResizing

let scheduleObj: Schedule = new Schedule({
allowResizing: true
});
scheduleObj.appendTo('#Schedule');
Blocking time intervals Property: blockoutSettings

var scheduleObj = new ej.Schedule($("#Schedule"), {
currentDate: new Date(2014, 4, 5),
blockoutSettings: {
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"
}
});		 Property: isBlock

let data: object[] = [{ Id: 1, Subject: 'Explosion of Betelgeuse Star', StartTime: new Date(2018, 1, 15, 9, 30), EndTime: new Date(2018, 1, 15, 11, 0), IsBlock: true }
let scheduleObj: Schedule = new Schedule({
eventSettings: { dataSource: data }
});
scheduleObj.appendTo('#Schedule');
Categorizing the appointments Property: categorizeSettings

var scheduleObj = new ej.Schedule($("#Schedule"), {
categorizeSettings: {
enable: false,
allowMultiple: false},
appointmentSettings: {
dataSource: [{
id: 100,
subject: "Testing",
StartTime: new Date(2014, 4, 2, 9, 00),
EndTime: new Date(2014, 4, 2, 10, 30),
EventCategorize: "6,4,3"}]
categorize: "EventCategorize"
}
});		 Not applicable
Setting cell height Property: cellHeight

var scheduleObj = new ej.Schedule($("#Schedule"), {
cellHeight: "30px"
});		 Not applicable
Cell template Property: workCellsTemplateId

var scheduleObj = new ej.Schedule($("#Schedule"), {
allDayCellsTemplate: "#allDayTemplate",
workCellsTemplateId: "#workTemplate"
});		 Property: cellTemplate

let scheduleObj: Schedule = new Schedule({
cellTemplate: "#cellTemplate";
});
scheduleObj.appendTo('#Schedule');
Setting cell width Property: cellWidth

var scheduleObj = new ej.Schedule($("#Schedule"), {
cellWidth: "40px"
});		 Not applicable
CSS class Property: cssClass

var scheduleObj = new ej.Schedule($("#Schedule"), {
cssClass: "customStyle"
});		 Property: cssClass

let scheduleObj: Schedule = new Schedule({
cssClass: "customStyle"
});
scheduleObj.appendTo('#Schedule');
Enabling Context-menu option Property: contextMenuSettings

var scheduleObj = new ej.Schedule($("#Schedule"), {
contextMenuSettings: {
enable: true,
menuItems:{
appointment:[
{
id: "open",  text: "Open Appointment" },
{
id: "delete", text: "Delete Appointment" }
],
cells: [
{ id: "new", text: "New Appointment"},
{ id: "recurrence", text: "New Recurring Appointment" }
]
}
}
});		 Not applicable
Current view Property: currentView

var scheduleObj = new ej.Schedule($("#Schedule"), {
currentView: ej.Schedule.CurrentView.Week
});		 Property: currentView

let scheduleObj: Schedule = new Schedule({
currentView: 'Day'
});
scheduleObj.appendTo('#Schedule');
Date format Property: date-format

var scheduleObj = new ej.Schedule($("#Schedule"), {
dateFormat: "yyyy/MM/dd"
});		 Property: dateFormat

let scheduleObj: Schedule = new Schedule({
dateFormat: "yyyy/MM/dd"
});
scheduleObj.appendTo('#Schedule');
Date header template Property: dateHeaderTemplateId

var scheduleObj = new ej.Schedule($("#Schedule"), {
dateHeaderTemplateId: "#dateHeaderTemplate"
});		 Property: dateHeaderTemplate

let scheduleObj: Schedule = new Schedule({
dateHeaderTemplate: "#dateHeaderTemplate"
});
scheduleObj.appendTo('#Schedule');
Editor template Not Applicable Property: editorTemplate

let scheduleObj: Schedule = new Schedule({
editorTemplate: "#editorTemplate"
});
scheduleObj.appendTo('#Schedule');
Enable load on demand Property: enableLoadOnDemand

var scheduleObj = new ej.Schedule($("#Schedule"), {
enableLoadOnDemand: true
});		 Not applicable
Enable persistence Property: enablePersistence

var scheduleObj = new ej.Schedule($("#Schedule"), {
enablePersistence: true
});		 Property: enablePersistence

let scheduleObj: Schedule = new Schedule({
enablePersistence: true
});
scheduleObj.appendTo('#Schedule');
Enable RTL Property: enableRTL

var scheduleObj = new ej.Schedule($("#Schedule"), {
enableRTL: true
});		 Property: enableRTL

let scheduleObj: Schedule = new Schedule({
enableRTL: true
});
scheduleObj.appendTo('#Schedule');
Setting end hour of the scheduler Property: endHour

var scheduleObj = new ej.Schedule($("#Schedule"), {
endHour: 18
});		 Property: endHour

let scheduleObj: Schedule = new Schedule({
endHour: '20:00'
});
scheduleObj.appendTo('#Schedule');
Setting first day of the week Property: firstDayOfWeek

var scheduleObj = new ej.Schedule($("#Schedule"), {
firstDayOfWeek: "Monday"
});		 Property: firstDayOfWeek

let scheduleObj: Schedule = new Schedule({
firstDayOfWeek: 1
});
scheduleObj.appendTo('#Schedule');
Height of the scheduler Property: height

var scheduleObj = new ej.Schedule($("#Schedule"), {
height: "550px"
});		 Property: height

let scheduleObj: Schedule = new Schedule({
height: '550px'
});
scheduleObj.appendTo('#Schedule');
Locale Property: locale

var scheduleObj = new ej.Schedule($("#Schedule"), {
locale: "fr-FR"
});		 Property: locale

let scheduleObj: Schedule = new Schedule({
locale: 'fr-FR'
});
scheduleObj.appendTo('#Schedule');
Priority settings for appointments Property: PrioritySettings

var scheduleObj = new ej.Schedule($("#Schedule"), {
PrioritySettings: {
enable: true,
dataSource: [
text: "text",
value: "value"
});		 Not applicable
Read only Property: readOnly

var scheduleObj = new ej.Schedule($("#Schedule"), {
readOnly: true
});		 Property: readonly

let scheduleObj: Schedule = new Schedule({
readonly: true
});
scheduleObj.appendTo('#Schedule');
Reminder settings Property: reminderSettings

var scheduleObj = new ej.Schedule($("#Schedule"), {
reminderSettings: {
enable: true,
alertBefore: 10
});		 Not applicable
Resource header template Property: resourceHeaderTemplateId

var scheduleObj = new ej.Schedule($("#Schedule"), {
resourceHeaderTemplateId: "#resTemplate",
group: {
resources: ["Rooms"]
},
resources: [
{
field: "roomId",title: "Room",name: "Rooms", allowMultiple: false,
resourceSettings: {
dataSource: [
{ text: "ROOM", id: 2, color: "#56ca85"}],
text: "text", id: "id", color: "color"}
}],
});		 Property: resourceHeaderTemplate

let scheduleObj: Schedule = new Schedule({
resourceHeaderTemplate: '#resTemplate',
group: {
resources: ['Owners']
},
resources: [{
field: 'TaskId', title: 'Assignee',name: 'Owners', allowMultiple: true,
dataSource: [
{ text: 'Smith', id: 2, color: '#7fa900' }
],
textField: 'text', idField: 'id', colorField: 'color'}],
});
scheduleObj.appendTo('#Schedule');
Current date of the scheduler Property: currentDate

var scheduleObj = new ej.Schedule($("#Schedule"), {
currentDate: new Date(2014,4,5)
});		 Property: selectedDate

let scheduleObj: Schedule = new Schedule({
selectedDate: new Date(2014,4,5)
});
scheduleObj.appendTo('#Schedule');
Show all day row Property: showAllDayRow

var scheduleObj = new ej.Schedule($("#Schedule"), {
showAllDayRow: false
});		 Not applicable
Show appointment navigator Property: showAppointmentNavigator

var scheduleObj = new ej.Schedule($("#Schedule"), {
showAppointmentNavigator: false
});		 Not applicable
Show delete confirmation dialog Property: showDeleteConfirmationDialog

var scheduleObj = new ej.Schedule($("#Schedule"), {
showDeleteConfirmationDialog: false
});		 Not applicable
Show header bar Property: showHeaderBar

var scheduleObj = new ej.Schedule($("#Schedule"), {
showHeaderBar: false
});		 Property: showHeaderBar

let scheduleObj: Schedule = new Schedule({
showHeaderBar: false
});
scheduleObj.appendTo('#Schedule');
Show location field in event window Property: showLocationField

var scheduleObj = new ej.Schedule($("#Schedule"), {
showLocationField: false
});		 Not applicable
Show time zone fields in event window Property: showTimeZoneFields

var scheduleObj = new ej.Schedule($("#Schedule"), {
showTimeZoneFields: false
});		 Not applicable
Show previous and next month dates in month view Property: showNextPrevMonth

var scheduleObj = new ej.Schedule($("#Schedule"), {
showNextPrevMonth: false
});		 Not applicable
Show overflow button Property: showOverflowButton

var scheduleObj = new ej.Schedule($("#Schedule"), {
showOverflowButton: false
});		 Property: rowAutoHeight

let scheduleObj: Schedule = new Schedule({
rowAutoHeight: true
});
scheduleObj.appendTo('#Schedule');
Show quick popup Property: showQuickWindow

var scheduleObj = new ej.Schedule($("#Schedule"), {
showQuickWindow: false
});		 Property: showQuickInfo

let scheduleObj: Schedule = new Schedule({
showQuickInfo: false
});
scheduleObj.appendTo('#Schedule');
Show current time indicator Property: showCurrentTimeIndicator

var scheduleObj = new ej.Schedule($("#Schedule"), {
showCurrentTimeIndicator: false
});		 Property: showTimeIndicator

let scheduleObj: Schedule = new Schedule({
showTimeIndicator: false
});
scheduleObj.appendTo('#Schedule');
Show week number Not Applicable Property: showWeekNumber

let scheduleObj: Schedule = new Schedule({
showWeekNumber: false
});
scheduleObj.appendTo('#Schedule');
Show weekend days Property: showWeekend

var scheduleObj = new ej.Schedule($("#Schedule"), {
showWeekend: false
});		 Property: showWeekend

let scheduleObj: Schedule = new Schedule({
showWeekend: false
});
scheduleObj.appendTo('#Schedule');
Setting start hour of the scheduler Property: startHour

var scheduleObj = new ej.Schedule($("#Schedule"), {
startHour:9
});		 Property: startHour

let scheduleObj: Schedule = new Schedule({
startHour:'09:00'
});
scheduleObj.appendTo('#Schedule');
Setting time mode on scheduler Property: timeMode

var scheduleObj = new ej.Schedule($("#Schedule"), {
timeMode:ej.Schedule.TimeMode.Hour24
});		 not applicable
Setting timezone for scheduler Property: timeZone

var scheduleObj = new ej.Schedule($("#Schedule"), {
timeZone: "UTC -5:00"
});		 Property: timezone

let scheduleObj: Schedule = new Schedule({
timezone:'UTC'
});
scheduleObj.appendTo('#Schedule');
Views in scheduler Property: views

var scheduleObj = new ej.Schedule($("#Schedule"), {
views: ["Day", "Week", "WorkWeek", "Month"]
});		 Property: views

let scheduleObj: Schedule = new Schedule({
views: ['Day','Week','WorkWeek','Month']
});
scheduleObj.appendTo('#Schedule');
Width of the scheduler Property: width

var scheduleObj = new ej.Schedule($("#Schedule"), {
width: "100%"
});		 Property: width

let scheduleObj: Schedule = new Schedule({
width:'100%'
});
scheduleObj.appendTo('#Schedule');
Working days Property: workWeek

var scheduleObj = new ej.Schedule($("#Schedule"), {
workWeek:["Tuesday", "Wednesday", "Thursday", "Friday","Saturday"]
});		 Property: workDays

let scheduleObj: Schedule = new Schedule({
workDays:[1,3,5]
});
scheduleObj.appendTo('#Schedule');
Working hours Property: workHours

var scheduleObj = new ej.Schedule($("#Schedule"), {
workHours:{
highlight: true,
start: 8,
end: 18
}
});		 Property: workHours

let scheduleObj: Schedule = new Schedule({
workHours: { highlight: true, start: '08:00', end: '18:00' }
});
scheduleObj.appendTo('#Schedule');

Resources

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

var scheduleObj = new ej.Schedule($("#Schedule"), {
resources: ["Rooms"]
},
resources: [
{
field: "roomId",title: "Room",name: "Rooms", allowMultiple: false,
resourceSettings: {
dataSource: [
{ text: "ROOM", id: 2, color: "#56ca85"}],
text: "text", id: "id", color: "color"}
}],
});		 Property: resources

let scheduleObj: Schedule = new Schedule({
group: {
resources: ['Owners']
},
resources: [{
field: 'TaskId', title: 'Assignee',name: 'Owners', allowMultiple: true,
dataSource: [
{ text: 'Smith', id: 2, color: '#7fa900' }
],
textField: 'text', idField: 'id', colorField: 'color'}],
});
scheduleObj.appendTo('#Schedule');
Allowing multiple selection of resources in event window Property: allowMultiple

var scheduleObj = new ej.Schedule($("#Schedule"), {
group: {
resources: ["Rooms"]
},
resources: [
{
field: "roomId",title: "Room",name: "Rooms", allowMultiple: false,
resourceSettings: {
dataSource: [
{ text: "Room3", id: 3, groupId: 2, color: "#56ac88", start: "10", end: "15", workWeek: ["sunday","saturday"] }],
text: "text", id: "id", color: "color", groupId: "groupId", start: "start", end: "end", workWeek: "workWeek"}
}],
});		 Property: allowMultiple

let scheduleObj: Schedule = new Schedule({
group: {
resources: ['Projects', 'Categories']
},
resources: [
{
field: 'ProjectId', title: 'Choose Project', name: 'Projects',
dataSource: [
{ text: 'PROJECT 1', id: 2, color: '#56ca85' }
],
textField: 'text', idField: 'id', colorField: 'color'}, {
field: 'CategoryId', title: 'Category',name: 'Categories', allowMultiple: true,
dataSource: [
{ text: 'Testing', id: 2, color: '#7fa900' }],
textField: 'text', idField: 'id', colorField: 'color'}],
});
scheduleObj.appendTo('#Schedule');
Setting different work hours for each resource

var scheduleObj = new ej.Schedule($("#Schedule"), {
group: {
resources: ["Rooms,Owners"]
},
resources: [{
field: "roomId",title: "Room",name: "Rooms", allowMultiple: false,
resourceSettings: {
dataSource: [
{ text: "Room3", id: 3, groupId: 2, color: "#56ac88", start: "10", end: "15", workWeek: ["sunday","saturday"] }],
text: "text", id: "id", groupId: "groupId", color: "color", start: "WorkHourStart" end: "WorkHourEnd" workWeek: "CustomDays"
},
resources: [{
field: "ownerId",title: "Owner",name: "Owners", allowMultiple: false,
resourceSettings: {
dataSource: [
{ text: "Margaret", id: 1, groupId: 1, color: '#1aaa55' }],
text: "text", id: "id", groupId: "groupId", color: "color"}
}]
});		 let scheduleObj: Schedule = new Schedule({
group: {
resources: ['Projects', 'Categories']
},
resources: [
{
field: 'ProjectId', title: 'Choose Project', name: 'Projects',
dataSource: [
{ text: "Project3", id: 3, groupId: 2, color: "#56ac88", start: "10", end: "15", workWeek: ["sunday","saturday"] }],
textField: 'text', idField: 'id', colorField: 'color'}, {
field: 'CategoryId', title: 'Category',name: 'Categories', allowMultiple: true,
dataSource: [
{ text: "Testing", id: 3, groupId: 2, color: "#56ac88", start: "10", end: "15", workWeek: ["sunday","saturday"] }],
textField: 'text', idField: 'id', colorField: 'color', workDaysField: 'workDays' startHourField: 'startHour', endHourField: 'endHour'}],
views: ['Week', 'Month']
});
scheduleObj.appendTo('#Schedule');

Group

Behavior API in Essential JS 1 API in Essential JS 2
Resources Property: resources

var scheduleObj = new ej.Schedule($("#Schedule"), {
group: {
resources: ["Rooms"]
},
resources: [
{
field: "roomId",title: "Room",name: "Rooms", allowMultiple: false,
resourceSettings: {
dataSource: [
{ text: "ROOM", id: 2, color: "#56ca85"}],
text: "text", id: "id", color: "color"}
}],
});		 Property: resources

let scheduleObj: Schedule = new Schedule({
group: {
resources: ['Owners']
},
resources: [{
field: 'TaskId', title: 'Assignee',name: 'Owners', allowMultiple: true,
dataSource: [
{ text: 'Smith', id: 2, color: '#7fa900' }
],
textField: 'text', idField: 'id', colorField: 'color'}],
});
scheduleObj.appendTo('#Schedule');
Allow group editing Property: allowGroupEditing

var scheduleObj = new ej.Schedule($("#Schedule"), {
group: {
resources: ["Rooms"],
allowGroupEditing: true
},
resources: [
{
field: "roomId",title: "Room",name: "Rooms", allowMultiple: false,
resourceSettings: {
dataSource: [
{ text: "ROOM1", id: 1,color: "#f8a398" },
{ text: "ROOM2", id: 2, color: "#56ca85"}],
text: "text", id: "id", color: "color"}
}],
});		 Property: allowGroupEdit

let scheduleObj: Schedule = new Schedule({
group: {
resources: ['Owners'],
allowGroupEdit: true
},
resources: [{
field: 'TaskId', title: 'Assignee',name: 'Owners', allowMultiple: true,
dataSource: [
{ text: 'Smith', id: 2, color: '#7fa900' }
],
textField: 'text', idField: 'id', colorField: 'color'}],
});
scheduleObj.appendTo('#Schedule');
Grouping resources by date Not applicable Property: byDate

let scheduleObj: Schedule = new Schedule({
group: {
byDate: true,
resources: ['Owners']
},
resources: [{
field: 'TaskId', title: 'Assignee',name: 'Owners', allowMultiple: true,
dataSource: [
{ text: 'Smith', id: 2, color: '#7fa900' }
],
textField: 'text', idField: 'id', colorField: 'color'}],
});
scheduleObj.appendTo('#Schedule');
Grouping resources based on its group ID Not applicable Property: byGroupId

let scheduleObj: Schedule = new Schedule({
group: {
byGroupId: true,
resources: ['Rooms', 'Owners']
},
resources: [{
field: 'RoomId', title: 'Room',name: 'Rooms', allowMultiple: false,
dataSource: [
{ text: 'Room 1', id: 1, color: '#7fa900' },
{ text: 'Room 2', id: 2, color: '#56ca85' }
],
textField: 'text', idField: 'id', colorField: 'color'},{
byGroupId: true,
resources: ['Rooms', 'Owners']
},
resources: [{
field: 'OwnerId', title: 'Owner',name: 'Owners', allowMultiple: true,
dataSource: [
{ text: 'Nancy', id: 1, groupId: 1, color: '#7fa900' },
{ text: 'Steven', id: 2, groupId: 2, color: '#56ca85' },
{ text: 'Michael', id: 3, groupId: 2, color: '#7499e1' }
],
textField: 'text', idField: 'id',groupIDField: 'groupId', colorField: 'color'}]
});
scheduleObj.appendTo('#Schedule');
Enabling compact view on mobile mode Not applicable Property: enableCompactView

let scheduleObj: Schedule = new Schedule({
var scheduleObj = new ej.schedule.Schedule({
group: {
enableCompactView: false,
resources: ['Owners']
},
resources: [{
field: 'TaskId', title: 'Assignee',name: 'Owners', allowMultiple: true,
dataSource: [
{ text: 'Smith', id: 2, color: '#7fa900' }
],
textField: 'text', idField: 'id', colorField: 'color'}],
});
scheduleObj.appendTo('#Schedule');
Header tooltip template Not applicable Property: headerTooltipTemplate

let scheduleObj: Schedule = new Schedule({
group: {
headerTooltipTemplate: '#resourceHeader',
resources: ['Owners']
},
resources: [{
field: 'TaskId', title: 'Assignee',name: 'Owners', allowMultiple: true,
dataSource: [
{ text: 'Smith', id: 2, color: '#7fa900' }
],
textField: 'text', idField: 'id', colorField: 'color'}],
});
scheduleObj.appendTo('#Schedule');

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

let scheduleObj: Schedule = new Schedule({
headerRows: [
{ option: 'Month', template: '#month-template' },
{ option: 'Week', template: '#week-template' },
{ option: 'Date' }
],
views: [
{ option: 'TimelineMonth', interval: 12 }],
});
schedule.appendTo('#Schedule');

TimeScale

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

var scheduleObj = new ej.Schedule($("#Schedule"), {
timeScale:{
enable: true
}
});		 Property: enable

let scheduleObj: Schedule = new Schedule({
timeScale:{
enable: true
}
});
scheduleObj.appendTo('#Schedule');
Setting major interval on time scale Property: majorSlot

var scheduleObj = new ej.Schedule($("#Schedule"), {
timeScale:{
enable: true,
majorSlot: 60
}
});		 Property: interval

let scheduleObj: Schedule = new Schedule({
timeScale:{
enable: true,
interval: 60
}
});
scheduleObj.appendTo('#Schedule');
Setting slot count on time scale Property: minorSlotCount

var scheduleObj = new ej.Schedule($("#Schedule"), {
timeScale:{
enable: true,
majorSlot: 60,
minorSlotCount:3
}
});		 Property: slotCount

let scheduleObj: Schedule = new Schedule({
timeScale:{
enable: true,
interval: 60,
slotCount: 6
}
});
scheduleObj.appendTo('#Schedule');
Defining major slot template Property: majorSlotTemplateId

var scheduleObj = new ej.Schedule($("#Schedule"), {
timeScale:{
enable: true,
majorSlot: 60,
minorSlotCount:6,
majorSlotTemplateId: "#majorSlotTemplate"
}
});		 Property: majorSlotTemplate

let scheduleObj: Schedule = new Schedule({
timeScale:{
enable: true,
interval: 60,
slotCount: 6,
majorSlotTemplate: '#majorSlotTemplate'
}
});
scheduleObj.appendTo('#Schedule');
Defining minor slot template Property: minorSlotTemplateId

var scheduleObj = new ej.Schedule($("#Schedule"), {
timeScale:{
enable: true,
majorSlot: 60,
minorSlotCount:6,
minorSlotTemplateId: "#minorSlotTemplate"
}
});		 Property: minorSlotTemplate

let scheduleObj: Schedule = new Schedule({
timeScale:{
enable: true,
interval: 60,
slotCount: 6,
minorSlotTemplate: '#minorSlotTemplate'
}
});
scheduleObj.appendTo('#Schedule');

Quick info templates

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

let scheduleObj: Schedule = new Schedule({
quickInfoTemplates: {
header: '#headerTemplate',
content:'#contentTemplate',
footer: '#footerTemplate'
}
});
scheduleObj.appendTo('#Schedule');

Event settings

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

var scheduleObj = new ej.Schedule($("#Schedule"), {
appointmentSettings: {
dataSource: Appoint,
id: "Id",
subject: "Subject",
startTime: "StartTime",
endTime: "EndTime",
description: "Description",
allDay: "AllDay",
recurrence: "Recurrence",
recurrenceRule: "RecurrenceRule"
}
});		 Property: dataSource

let scheduleObj: Schedule = new Schedule({
eventSettings: { dataSource: data }
});
scheduleObj.appendTo('#Schedule');
Appointment fields var scheduleObj = new ej.Schedule($("#Schedule"), {
appointmentSettings: {
id: "Id",
subject: "Subject",
startTime: "StartTime",
endTime: "EndTime",
description: "Description",
allDay: "AllDay",
recurrence: "Recurrence",
recurrenceRule: "RecurrenceRule"
}
});		 Property: eventsSettings

let scheduleObj: Schedule = new Schedule({
dataSource: data,
fields: {
id: 'id',
subject: { name: 'Subject', default: 'New title', title: 'New Event', validation: ValidationRules },
location: { name: 'Location' },
description: {name: 'Description' },
startTime: {name: 'StartTime' },
endTime: {name: 'EndTime' },
recurrenceID: {name: 'Recurrence' },
recurrenceRule : {name: 'Recurrence' },
recurrenceException: {name: 'EndTime' },
startTimezone: {name: 'StartTime' },
endTimezone: {name: 'EndTime' }
}
});
scheduleObj.appendTo('#Schedule');
Enabling tooltip for appointments Property: enable

var scheduleObj = new ej.Schedule($("#Schedule"), {
tooltipSettings: {
enable: true
}
});
Note: Here tooltip setting for events is maintained separately		 Property: enableTooltip

let scheduleObj: Schedule = new Schedule({
eventSettings: {
dataSource: data,
enableTooltip: true
}
});
scheduleObj.appendTo('#Schedule');
Tooltip template for appointments Property: templateId

var scheduleObj = new ej.Schedule($("#Schedule"), {
tooltipSettings: {
enable: true,
templateId:"#tooltip"
}
});
Note: Here tooltip setting for events is maintained separately		 Property: tooltipTemplate

let scheduleObj: Schedule = new Schedule({
eventSettings: {
dataSource: data,
enableTooltip: true,
tooltipTemplate: '#template'
}
});
scheduleObj.appendTo('#Schedule');
Template for appointments Property: appointmentTemplateId

var scheduleObj = new ej.Schedule($("#Schedule"), {
appointmentTemplateId:"#appTemplate",
appointmentSettings: {
dataSource: data
}
});
Note: Here appointment template is used as simple API		 Property: template

let scheduleObj: Schedule = new Schedule({
eventSettings: {
dataSource: data,
template: '#eventTemplate'
}
});
scheduleObj.appendTo('#Schedule');
Query Property: query

var dataManager = ej.DataManager({
url: "http://mvc.syncfusion.com/OdataServices/Northwnd.svc",
crossDomain: true
});
var query = ej.Query().from("Events").take(10);
var scheduleObj = new ej.Schedule($("#Schedule"), {
var query = ej.Query().from("Events").take(10);
appointmentSettings: {
dataSource: dataManager,
query: query
}
});		 Property: query

let dataManger: DataManager = new DataManager({
url:
'https://js.syncfusion.com/demos/ejservices/api/Schedule/LoadData',
adaptor: new ODataV4Adaptor,
crossDomain: true
});
let scheduleObj: Schedule = new Schedule({
eventSettings: { dataSource: dataManger, query: new Query().from('EventDatas') }
scheduleObj.appendTo('#Schedule');
Define which resource level color applied to events Not applicable Property: resourceColorField

let scheduleObj: Schedule = new Schedule({
group: {
resources: ['Projects', 'Categories']
},
resources: [
{
field: 'ProjectId', title: 'Choose Project', name: 'Projects',
dataSource: [
{ text: 'PROJECT 1', id: 2, color: '#56ca85' }
],
textField: 'text', idField: 'id', colorField: 'color'}, {
field: 'CategoryId', title: 'Category',name: 'Categories', allowMultiple: true,
dataSource: [
{ text: 'Testing', id: 2, color: '#7fa900' }],
textField: 'text', idField: 'id', colorField: 'color'}],
eventSettings: { resourceColorField: 'Projects' }
});
scheduleObj.appendTo('#Schedule');

Methods

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

$("#Schedule").ejSchedule();
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()

var scheduleobj= document.getElementById('schedule').ej2_instances[0];
scheduleObj.addEvent({
Id: 1,
Subject: "New Event",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 12, 00)
});
To add resources dynamically Method: addResource()

$("#Schedule").ejSchedule();
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()

var data = { text: "Paul", id: 1, groupId: 3, color: "#cc99ff" };
var index = 0;
var scheduleobj= document.getElementById('schedule').ej2_instances[0];
scheduleobj.addResource(data, "Owners", index));
databind Not applicable Method: dataBind()

var scheduleobj= document.getElementById('schedule').ej2_instances[0];
scheduleobj.currentView = 'Month';
scheduleobj.dataBind();
Delete appointment manually Method: deleteAppointment()

$("#Schedule").ejSchedule();
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");
schObj.deleteAppointment(data);		 Method: deleteEvent()

var data = {
Id: 1,
Subject: "Testing",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 12, 00)};
var scheduleobj= document.getElementById('schedule').ej2_instances[0];
scheduleobj.deleteEvent(data);
destroy scheduler Method: destroy()

var scheduleobj = $("#Schedule").data("ejSchedule");
schObj.destroy();		 Method: destroy()

var scheduleobj= document.getElementById('schedule').ej2_instances[0];
scheduleObj.destroy();
Get cell details Method: getSlotByElement()

$("#Schedule").ejSchedule();
var scheduleobj = $("#Schedule").data("ejSchedule");
var $td = $(".e-draggableworkarea table tr td").first();
var slotDetails = obj.getSlotByElement($td);		 Method: getCellDetails()

var scheduleobj= document.getElementById('schedule').ej2_instances[0];
var $td = document.querySelector(".e-content-table tbody tr td");
var cellDetail = scheduleobj.getCellDetails($td);
Get current view appointments Method: getCurrentViewAppointments()

$("#Schedule").ejSchedule();
var scheduleobj = $("#Schedule").data("ejSchedule");
var currApp= scheduleobj.getCurrentViewAppointments();		 Method: getCurrentViewEvents()

var scheduleobj= document.getElementById('schedule').ej2_instances[0];
var currApp = scheduleobj.getCurrentViewEvents();
Get entire appointment collection Method: getAppointments()

$("#Schedule").ejSchedule();
var scheduleobj = $("#Schedule").data("ejSchedule");
var AppDetails = scheduleobj.getAppointments();
Method: getEvents()

var scheduleobj= document.getElementById('schedule').ej2_instances[0];
var AppDetails = scheduleobj.getEvents();
Get current view dates Not applicable Method: getCurrentViewDates()

var scheduleobj= document.getElementById('schedule').ej2_instances[0];
var AppDetails = scheduleobj.getCurrentViewDates();
Get event details Not applicable Method: getEventDetails()

var scheduleobj= document.getElementById('schedule').ej2_instances[0];
var AppDetails = scheduleobj.getEventDetails(appElement);
Get occurrences using event ID Not applicable Method: getOccurrencesByID()

var scheduleobj= document.getElementById('schedule').ej2_instances[0];
var recCollection = scheduleobj.getOccurrencesByID(1);
Get occurrences in the provided date range Not applicable Method: getOccurrencesByRange()

var scheduleobj= document.getElementById('schedule').ej2_instances[0];
var sDate = new Date(2018, 1, 12);
var eDate = new Date(2018, 1, 17);
var resCollection = scheduleobj.getOccurrencesByRange(sDate, eDate);
Get resource details using index Not applicable Method: getResourceByIndex()

var scheduleobj= document.getElementById('schedule').ej2_instances[0];
var resCollection = scheduleobj.getResourceByIndex(2);
Show spinner Not applicable Method: showSpinner()

var scheduleobj= document.getElementById('schedule').ej2_instances[0];
scheduleobj.showSpinner();
Hide spinner Not applicable Method: hideSpinner()

var scheduleobj= document.getElementById('schedule').ej2_instances[0];
scheduleobj.hideSpinner();
Check whether the time slot is available Not applicable Method: isSlotAvailble()

var scheduleobj= document.getElementById('schedule').ej2_instances[0];
var sTime = new Date(2018, 1, 14, 09, 30);
var etime = new Date(2018, 1, 14, 10, 30);
var resCollection = scheduleobj.isSlotAvailble(sTime, eTime);
Open the event window manually Not applicable Method: openEditor()

var scheduleobj= document.getElementById('schedule').ej2_instances[0];
var $td = document.querySelector(".e-content-table tbody tr td");
var cellDetail = scheduleobj.getCellDetails($td);
scheduleobj.openEditor(cellDetail);
Refresh the scheduler Method: refresh()

$("#Schedule").ejSchedule();
var scheduleobj = $("#Schedule").data("ejSchedule");
scheduleobj.refresh();		 Method: refresh()

var scheduleobj= document.getElementById('schedule').ej2_instances[0];
scheduleobj.refresh();
Refresh the events Method: refreshAppointments()

$("#Schedule").ejSchedule();
var scheduleobj = $("#Schedule").data("ejSchedule");
scheduleobj.refreshAppointments();		 Method: refreshEvents()

var scheduleobj= document.getElementById('schedule').ej2_instances[0];
scheduleobj.refreshEvents();
Refresh the scroller Method: refreshScroller()

$("#Schedule").ejSchedule();
var scheduleobj = $("#Schedule").data("ejSchedule");
scheduleobj.refreshScroller();		 Not Applicable
To remove resources dynamically Method: removeResource()

$("#Schedule").ejSchedule();
var resID = 1;
var scheduleobj = $("#Schedule").data("ejSchedule");
scheduleobj.removeResource(resID, "Owners");		 Method: removeResource()

var obj = { text: "Paul", id: 3, groupId: 1, color: "#cc99ff" };
var index = 0;
var scheduleobj= document.getElementById('schedule').ej2_instances[0];
scheduleobj.removeResource(index, "Owners", );
Export schedule as PDF Method: exportSchedule()

$("#Schedule").ejSchedule();
var scheduleobj = $("#Schedule").data("ejSchedule");
scheduleobj.exportSchedule("ActionName","null", null);
 Not Applicable
Export scheduler events to ICS Method: exportSchedule()

$("#Schedule").ejSchedule();
var scheduleobj = $("#Schedule").data("ejSchedule");
scheduleobj.exportSchedule("ActionName", "ExportToICS", null);
 Method: exportToICalendar()
var scheduleobj= document.getElementById('schedule').ej2_instances[0];
scheduleObj.exportToICalendar();
Import scheduler events from ICS Not Applicable Method: importICalendar()
var scheduleobj= document.getElementById('schedule').ej2_instances[0];
scheduleObj.importICalendar();
Export scheduler appointments in Excel file Method: exportToExcel()

$("#Schedule").ejSchedule();
var scheduleobj = $("#Schedule").data("ejSchedule");
scheduleobj.exportToExcel("ActionName", null, true);
 Method: exportToExcel()
var scheduleobj= document.getElementById('schedule').ej2_instances[0];
scheduleObj.exportToExcel();
Print the scheduler Method: print()

$("#Schedule").ejSchedule();
var scheduleobj = $("#Schedule").data("ejSchedule");
scheduleobj.print();
 Not Applicable
Filter appointments Method: filterAppointments()

$("#Schedule").ejSchedule();
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()

$("#Schedule").ejSchedule();
var scheduleobj = $("#Schedule").data("ejSchedule");
var searchApp = scheduleobj.searchAppointments("with");		 Not Applicable
To edit appointments manually Not applicable Method: saveEvent()

var scheduleobj= document.getElementById('schedule').ej2_instances[0];
scheduleobj.saveEvent({
Id: 1,
Subject: 'Event edited',
StartTime: new Date(2018, 7, 31, 10, 30),
EndTime: new Date(2018, 7, 31, 12, 0)});
Setting work hours Not applicable Method: setWorkHours()

var scheduleobj= document.getElementById('schedule').ej2_instances[0];
scheduleobj.setWorkHours([new Date(2017, 9, 5)], '04:00', '08:00');
Scrolling to specific time Not applicable Method: scrollTo()

var scheduleobj= document.getElementById('schedule').ej2_instances[0];
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

var scheduleObj = new ej.Schedule($("#Schedule"), {
actionBegin: function OnActionBegin (args){}
});		 Event: actionBegin

let schedule: Schedule = new Schedule({
actionBegin: function onActionBegin(args) {}
});
Fires on the completion of each scheduler action Event: actionComplete

var scheduleObj = new ej.Schedule($("#Schedule"), {
actionComplete: function onActionComplete (args){}
});
 Event: actionComplete

let schedule: Schedule = new Schedule({
actionComplete: function onActionComplete (args) {}
});
Fires when the scheduler action gets failed Not applicable Event: actionFailure

let schedule: Schedule = new Schedule({
actionFailure: function onActionFailure(args) {}
});
Fires on appointment hover Event: appointmentHover

var scheduleObj = new ej.Schedule($("#Schedule"), {
appointmentHover: function onAppointmentHover (args) {}
});		 Not applicable
Fires before an appointment gets created Event: beforeAppointmentCreate

var scheduleObj = new ej.Schedule($("#Schedule"), {
beforeAppointmentCreate: function OnBeforeAppointmentCreate (args){}
});		 Event: actionBegin

let schedule: Schedule = new Schedule({
actionBegin: function onActionBegin(args) { if(args.requestType == 'eventCreate') {} }
});
Fires before an appointment gets edited Event: beforeAppointmentChange

var scheduleObj = new ej.Schedule($("#Schedule"), {
beforeAppointmentChange: function OnBeforeAppointmentChange (args){}
});		 Event: actionBegin

let schedule: Schedule = new Schedule({
actionBegin: function onActionBegin(args) { if(args.requestType == 'eventChange') {} }
});
Fires before an appointment gets deleted Event: beforeAppointmentRemove

var scheduleObj = new ej.Schedule($("#Schedule"), {
beforeAppointmentRemove: function OnBeforeAppointmentRemove (args){}
});		 Event: actionBegin

let schedule: Schedule = new Schedule({
actionBegin: function onActionBegin(args) { if(args.requestType == 'eventRemove') {} }
});
Fires before the context menu opens on scheduler Event: beforeContextMenuOpen

var scheduleObj = new ej.Schedule($("#Schedule"), {
beforeContextMenuOpen: function OnBeforeContextMenuOpen (args){}
});		 Not applicable
Fires on cell click Event: cellClick

var scheduleObj = new ej.Schedule($("#Schedule"), {
cellClick: function onCellClick (args){}
});		 Event: cellClick

let schedule: Schedule = new Schedule({
cellClick: function onCellClick (args) {}
});
Fires on cell double click Event: cellDoubleClick

var scheduleObj = new ej.Schedule($("#Schedule"), {
cellDoubleClick: function oncellDoubleClick (args){}
});		 Event: cellDoubleClick

let schedule: Schedule = new Schedule({
cellDoubleClick: function oncellDoubleClick (args) {}
});
Fires on cell hover Event: CellHover

var scheduleObj = new ej.Schedule($("#Schedule"), {
CellHover: function onCellHover (args){}
});		 Not applicable
Fires once the scheduler is created Event: create

var scheduleObj = new ej.Schedule($("#Schedule"), {
Create: function onCreate (args){}
});		 Event: created

let schedule: Schedule = new Schedule({
created: function oncreated (args) {}
});
Fires on data binding action Not applicable Event: dataBinding

let schedule: Schedule = new Schedule({
dataBinding: function onDataBinding (args) {}
});
Fires after the data is bound to the control Not applicable Event: dataBound

let schedule: Schedule = new Schedule({
dataBinding: function onDataBound (args) {}
});
Fires once the scheduler is destroyed Event: destroy

var scheduleObj = new ej.Schedule($("#Schedule"), {
destroy: function onDestroy (args){}
});		 Event: destroyed

let schedule: Schedule = new Schedule({
destroyed: function onDestroyed (args) {}
});
Fires on event click Event: appointmentClick

var scheduleObj = new ej.Schedule($("#Schedule"), {
appointmentClick: function onAppointmentClick (args) {}
});		 Event: eventClick

let schedule: Schedule = new Schedule({
eventClick: function onAppointmentClick(args) {}
});
Fires on event double click Event: appointmentDoubleClick

var scheduleObj = new ej.Schedule($("#Schedule"), {
appointmentDoubleClick: function onappointmentDoubleClick (args) {}
});		 Not applicable
Fires for keyboard actions Event: keyDown

var scheduleObj = new ej.Schedule($("#Schedule"), {
keyDown: function onKeyDown (args) {}
});		 Not applicable
Fires on context menu item click Event: menuItemClick

var scheduleObj = new ej.Schedule($("#Schedule"), {
menuItemClick: function onMenuItemClick (args) {}
});		 Not applicable
Fires on navigation Event: navigation

var scheduleObj = new ej.Schedule($("#Schedule"), {
navigation: function onNavigation (args) {}
});		 Event: navigating

let schedule: Schedule = new Schedule({
navigating: function onNavigating(args) {}
});
Fires on popup open Event: appointmentWindowOpen

var scheduleObj = new ej.Schedule($("#Schedule"), {
appointmentWindowOpen: function onAppointmentWindowOpen (args) {}
});		 Event: popupOpen

let schedule: Schedule = new Schedule({
popupOpen: function onPopupOpen(args) {}
});
Fires on dragging event Event: drag

var scheduleObj = new ej.Schedule($("#Schedule"), {
drag: function onDrag(args) {}
});		 Event: drag

let schedule: Schedule = new Schedule({
drag: function onDrag(args) {}
});
Fires on drag start Event: dragStart

var scheduleObj = new ej.Schedule($("#Schedule"), {
dragStart: function onDragStart(args) {}
});		 Event: dragStart

let schedule: Schedule = new Schedule({
dragStart: function onDragStart(args) {}
});
Fires on drag stop Event: dragStop

var scheduleObj = new ej.Schedule($("#Schedule"), {
dragStop: function onDragStop(args) {}
});		 Event: dragStop

let schedule: Schedule = new Schedule({
dragStop: function onDragStop(args) {}
});
Fires on overflow button click Event: overflowButtonClick

var scheduleObj = new ej.Schedule($("#Schedule"), {
overflowButtonClick: function onOverflowButtonClick(args) {}
});		 Event: popupOpen

let schedule: Schedule = new Schedule({
popupOpen: function onPopupOpen(args) { if(args.requestType == 'EventContainer') {} }
});
Fires on overflow button hover Event: overflowButtonHover

var scheduleObj = new ej.Schedule($("#Schedule"), {
overflowButtonHover: function onOverflowButtonHover(args) {}
});		 Not applicable
Fires when the reminder action takes place Event: reminder

var scheduleObj = new ej.Schedule($("#Schedule"), {
reminder: function onReminder(args) {}
});		 Not applicable
Fires on resizing event Event: resize

var scheduleObj = new ej.Schedule($("#Schedule"), {
resize: function onResize(args) {}
});		 Event: resize

let schedule: Schedule = new Schedule({
resize: function onResize(args) {}
});
Fires on resize start Event: resizeStart

var scheduleObj = new ej.Schedule($("#Schedule"), {
resizeStart: function onResizeStart(args) {}
});		 Event: resizeStart

let schedule: Schedule = new Schedule({
resizeStart: function onResizeStart (args) {}
});
Fires on resize stop Event: resizeStop

var scheduleObj = new ej.Schedule($("#Schedule"), {
resizeStop: function onResizeStop(args) {}
});		 Event: resizeStop

let schedule: Schedule = new Schedule({
resizeStop: function onResizeStop (args) {}
});
Fires on rendering of every scheduler elements Event: queryCellInfo

var scheduleObj = new ej.Schedule($("#Schedule"), {
queryCellInfo: function onQueryCellInfo (args) {}
Event: renderCell

let schedule: Schedule = new Schedule({
renderCell: function onRenderCell (args) {}
});
Fires before the event rendering on UI Not applicable Event: eventRendered

let schedule: Schedule = new Schedule({
eventRendered: function onEventRendered (args) {}
});
Previous
Next