JavaScript (ES5)
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

$("#Schedule").ejSchedule({
currentView: "Agenda",
daysInAgenda: 7
});		 Property: agendaDaysCount

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

$("#Schedule").ejSchedule({
allowDelete: false
});		 Not applicable
Allows dragging and dropping of appointments Property: allowDragAndDrop

$("#Schedule").ejSchedule({
allowDragAndDrop: false
});		 Property: allowDragAndDrop

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

$("#Schedule").ejSchedule({
allowInline: true
});		 Not applicable
Allow keyboard interactions Property: allowKeyboardNavigation

$("#Schedule").ejSchedule({
allowKeyboardNavigation: false
});		 Property: allowKeyboardInteraction

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

$("#Schedule").ejSchedule({
enableAppointmentResize: true
});		 Property: allowResizing

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

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

var data = [{ 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 }
var scheduleObj = new ej.schedule.Schedule({
eventSettings: { dataSource: data }
});
scheduleObj.appendTo('#Schedule');
Categorizing the appointments Property: categorizeSettings

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

$("#Schedule").ejSchedule({
cellHeight: "30px"
});		 Not applicable
Cell template Property: workCellsTemplateId

$("#Schedule").ejSchedule({
allDayCellsTemplate: "#allDayTemplate",
workCellsTemplateId: "#workTemplate"
});		 Property: cellTemplate

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

$("#Schedule").ejSchedule({
cellWidth: "40px"
});		 Not applicable
CSS class Property: cssClass

$("#Schedule").ejSchedule({
cssClass: "customStyle"
});		 Property: cssClass

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

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

$("#Schedule").ejSchedule({
currentView: ej.Schedule.CurrentView.Week
});		 Property: currentView

var scheduleObj = new ej.schedule.Schedule({
currentView: 'Week'
});
scheduleObj.appendTo('#Schedule');
Date format Property: date-format

$("#Schedule").ejSchedule({
dateFormat: "yyyy/MM/dd"
});		 Property: dateFormat

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

$("#Schedule").ejSchedule({
dateHeaderTemplateId: "#dateHeaderTemplate"
});		 Property: dateHeaderTemplate

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

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

$("#Schedule").ejSchedule({
enableLoadOnDemand: true
});		 Not applicable
Enable persistence Property: enablePersistence

$("#Schedule").ejSchedule({
enablePersistence: true
});		 Property: enablePersistence

var scheduleObj = new ej.schedule.Schedule({
enablePersistence: true
});
Enable RTL Property: enableRTL

$("#Schedule").ejSchedule({
enableRTL: true
});		 Property: enableRTL

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

$("#Schedule").ejSchedule({
endHour: 18
});		 Property: endHour

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

$("#Schedule").ejSchedule({
firstDayOfWeek: "Monday"
});		 Property: firstDayOfWeek

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

$("#Schedule").ejSchedule({
height: "550px"
});		 Property: height

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

$("#Schedule").ejSchedule({
locale: "fr-FR"
});		 Property: locale

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

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

$("#Schedule").ejSchedule({
readOnly: true
});		 Property: readonly

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

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

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

var scheduleObj = new ej.schedule.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

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

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

$("#Schedule").ejSchedule({
showAllDayRow: false
});		 Not applicable
Show appointment navigator Property: showAppointmentNavigator

$("#Schedule").ejSchedule({
showAppointmentNavigator: false
});		 Not applicable
Show delete confirmation dialog Property: showDeleteConfirmationDialog

$("#Schedule").ejSchedule({
showDeleteConfirmationDialog: false
});		 Not applicable
Show header bar Property: showHeaderBar

$("#Schedule").ejSchedule({
showHeaderBar: false
});		 Property: showHeaderBar

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

$("#Schedule").ejSchedule({
showLocationField: false
});		 Not applicable
Show time zone fields in event window Property: showTimeZoneFields

$("#Schedule").ejSchedule({
showTimeZoneFields: false
});		 Not applicable
Show previous and next month dates in month view Property: showNextPrevMonth

$("#Schedule").ejSchedule({
showNextPrevMonth: false
});		 Not applicable
Show overflow button Property: showOverflowButton

$("#Schedule").ejSchedule({
showOverflowButton: false
});		 Not applicable
Show quick popup Property: showQuickWindow

$("#Schedule").ejSchedule({
showQuickWindow: false
});		 Property: showQuickInfo

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

$("#Schedule").ejSchedule({
showCurrentTimeIndicator: false
});		 Property: showTimeIndicator

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

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

$("#Schedule").ejSchedule({
showWeekend: false
});		 Property: showWeekend

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

$("#Schedule").ejSchedule({
startHour:9
});		 Property: startHour

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

$("#Schedule").ejSchedule({
timeMode:ej.Schedule.TimeMode.Hour24
});		 not applicable
Setting timezone for scheduler Property: timeZone

$("#Schedule").ejSchedule({
timeZone: "UTC -5:00"
});		 Property: timezone

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

$("#Schedule").ejSchedule({
views: ["Day", "Week", "WorkWeek", "Month"]
});		 Property: views

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

$("#Schedule").ejSchedule({
width: "100%"
});		 Property: width

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

$("#Schedule").ejSchedule({
workWeek:["Tuesday", "Wednesday", "Thursday", "Friday","Saturday"]
});		 Property: workDays

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

$("#Schedule").ejSchedule({
workHours:{
highlight: true,
start: 8,
end: 18
}
});		 Property: workHours

var scheduleObj = new ej.schedule.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

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

var scheduleObj = new ej.schedule.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

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

var scheduleObj = new ej.schedule.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

$("#Schedule").ejSchedule({
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"}
}],
});		 var scheduleObj = new ej.schedule.Schedule({
group: {
resources: ['Projects', 'Categories']
},
resources: [
{
field: 'ProjectId', title: 'Choose Project', name: 'Projects',
dataSource: [
{ text: "Project3", id: 3, groupId: 2, color: "#56ac88", start: "10:00", end: "15:00", workWeek: [1, 2] }],
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:00", end: "15:00", workWeek: [2,6] }],
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

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

var scheduleObj = new ej.schedule.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

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

var scheduleObj = new ej.schedule.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

var scheduleObj = new ej.schedule.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

var scheduleObj = new ej.schedule.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

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

var scheduleObj = new ej.schedule.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

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

TimeScale

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

$("#Schedule").ejSchedule({
timeScale:{
enable: true
}
});		 Property: enable

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

$("#Schedule").ejSchedule({
timeScale:{
enable: true,
majorSlot: 60
}
});		 Property: interval

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

$("#Schedule").ejSchedule({
timeScale:{
enable: true,
majorSlot: 60,
minorSlotCount:3
}
});		 Property: slotCount

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

$("#Schedule").ejSchedule({
timeScale:{
enable: true,
majorSlot: 60,
minorSlotCount:6,
majorSlotTemplateId: "#majorSlotTemplate"
}
});		 Property: majorSlotTemplate

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

$("#Schedule").ejSchedule({
timeScale:{
enable: true,
majorSlot: 60,
minorSlotCount:6,
minorSlotTemplateId: "#minorSlotTemplate"
}
});		 Property: minorSlotTemplate

var scheduleObj = new ej.schedule.Schedule({
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

var scheduleObj = new ej.schedule.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

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

var scheduleObj = new ej.schedule.Schedule({

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

var scheduleObj = new ej.schedule.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

$("#Schedule").ejSchedule({
tooltipSettings: {
enable: true
}
});
Note: Here tooltip setting for events is maintained separately		 Property: enableTooltip

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

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

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

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

var scheduleObj = new ej.schedule.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);
$("#Schedule").ejSchedule({
appointmentSettings: {
dataSource: dataManager,
query: query
}
});		 Property: query

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

var scheduleObj = new ej.schedule.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()

$("#Schedule").ejSchedule();
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-work-cells");
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 data = { 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","ExportToICS", null);
 Not Applicable
Export scheduler appointments in Excel file Method: exportToExcel()

$("#Schedule").ejSchedule();
var scheduleobj = $("#Schedule").data("ejSchedule");
scheduleobj.exportToExcel("ActionName", null, true);
 Not Applicable
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

$("#Schedule").ejSchedule({
actionBegin: function OnActionBegin (args){}
});		 Event: actionBegin

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

$("#Schedule").ejSchedule({
actionComplete: function onActionComplete (args){}
});
 Event: actionComplete

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

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

$("#Schedule").ejSchedule({
appointmentHover: function onAppointmentHover (args) {}
});		 Not applicable
Fires before an appointment gets created Event: beforeAppointmentCreate

$("#Schedule").ejSchedule({
beforeAppointmentCreate: function OnBeforeAppointmentCreate (args){}
});		 Event: actionBegin

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

$("#Schedule").ejSchedule({
beforeAppointmentChange: function OnBeforeAppointmentChange (args){}
});		 Event: actionBegin

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

$("#Schedule").ejSchedule({
beforeAppointmentRemove: function OnBeforeAppointmentRemove (args){}
});		 Event: actionBegin

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

$("#Schedule").ejSchedule({
beforeContextMenuOpen: function OnBeforeContextMenuOpen (args){}
});		 Not applicable
Fires on cell click Event: cellClick

$("#Schedule").ejSchedule({
cellClick: function onCellClick (args){}
});		 Event: cellClick

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

$("#Schedule").ejSchedule({
cellDoubleClick: function oncellDoubleClick (args){}
});		 Event: cellDoubleClick

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

$("#Schedule").ejSchedule({
CellHover: function onCellHover (args){}
});
Fires once the scheduler is created Event: create

$("#Schedule").ejSchedule({
Create: function onCreate (args){}
});		 Event: created

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

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

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

$("#Schedule").ejSchedule({
destroy: function onDestroy (args){}
});		 Event: destroyed

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

$("#Schedule").ejSchedule({
appointmentClick: function onAppointmentClick (args) {}
});		 Event: eventClick

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

$("#Schedule").ejSchedule({
appointmentDoubleClick: function onappointmentDoubleClick (args) {}
});		 Not applicable
Fires for keyboard actions Event: keyDown

$("#Schedule").ejSchedule({
keyDown: function onKeyDown (args) {}
});		 Not applicable
Fires on context menu item click Event: menuItemClick

$("#Schedule").ejSchedule({
menuItemClick: function onMenuItemClick (args) {}
});		 Not applicable
Fires on navigation Event: navigation

$("#Schedule").ejSchedule({
navigation: function onNavigation (args) {}
});		 Event: navigating

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

$("#Schedule").ejSchedule({
appointmentWindowOpen: function onAppointmentWindowOpen (args) {}
});		 Event: popupOpen

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

$("#Schedule").ejSchedule({
drag: function onDrag(args) {}
});		 Event: drag

var schObj = new ej.schedule.Schedule({
drag: function onDrag(args) {}
});
Fires on drag start Event: dragStart

$("#Schedule").ejSchedule({
dragStart: function onDragStart(args) {}
});		 Event: dragStart

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

$("#Schedule").ejSchedule({
dragStop: function onDragStop(args) {}
});		 Event: dragStop

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

$("#Schedule").ejSchedule({
overflowButtonClick: function onOverflowButtonClick(args) {}
});		 Event: popupOpen

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

$("#Schedule").ejSchedule({
overflowButtonHover: function onOverflowButtonHover(args) {}
});		 Not applicable
Fires when the reminder action takes place Event: reminder

$("#Schedule").ejSchedule({
reminder: function onReminder(args) {}
});		 Not applicable
Fires on resizing event Event: resize

$("#Schedule").ejSchedule({
resize: function onResize(args) {}
});		 Event: resize

var schObj = new ej.schedule.Schedule({
resize: function onResize(args) {}
});
Fires on resize start Event: resizeStart

$("#Schedule").ejSchedule({
resizeStart: function onResizeStart(args) {}
});		 Event: resizeStart

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

$("#Schedule").ejSchedule({
resizeStop: function onResizeStop(args) {}
});		 Event: resizeStop

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

$("#Schedule").ejSchedule({
queryCellInfo: function onQueryCellInfo (args) {}
Event: renderCell

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

var schObj = new ej.schedule.Schedule({
eventRendered: function onEventRendered (args) {}
});
Previous
Next