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

Migration from Essential JS 1 in JavaScript (ES5) Schedule control

24 May 2022 / 23 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

$("#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: dateFormat

$("#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
});		 Property: rowAutoHeight

var scheduleObj = new ej.schedule.Schedule({
rowAutoHeight: true
});
scheduleObj.appendTo('#Schedule');
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://ej2services.syncfusion.com/production/web-services/api/Schedule',
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 scheduler 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()

var scheduleobj= $("#schedule").ejSchedule(instance);
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

$("#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

var 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) {}
});

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