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