This topic shows the API equivalent of JS2 Scheduler component to be used, while migrating your project that uses JS1 Scheduler.
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'); |
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'); |
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'); |
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'); |
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'); |
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'); |
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'); |
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'); |
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) {} }); |