JavaScript
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Migration from Essential JS 1 in JavaScript Schedule control

30 Jul 2021 / 26 minutes to read

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

Scheduler

Properties

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

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://ej2services.syncfusion.com/production/web-services/api/Schedule',
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) {}
});

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

Previous
Next