EJ1 API Migration in Angular Scheduler

This topic shows the API equivalents for the Essential® JS 1 Scheduler and the Essential® JS 2 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: agendaViewSettings.daysInAgenda

<ej-schedule id="Schedule" currentview="currentview" [agendaViewSettings]="AgendaSettings">
</ej-schedule>
TS
this.AgendaSettings = {
daysInAgenda: 5}; 		Property: agendaDaysCount

<ejs-schedule [(currentView)]="currentView" [agendaDaysCount]= "agendaDaysCount">
</ejs-schedule>
TS
this.currentView = ['Agenda'];
this.agendaDaysCount=7;
Preventing deletion of appointment Property: allowDelete

<ej-schedule id="Schedule" [allowDelete]="false">
</ej-schedule> 		Not applicable
Allows dragging and dropping of appointments Property: allowDragAndDrop

<ej-schedule id="Schedule" [allowDragAndDrop]="false">
</ej-schedule> 		Property: allowDragAndDrop

<ejs-schedule [allowDragAndDrop]="false">
</ejs-schedule>
Enabling inline editing of appointments Property: allowInline

<ej-schedule id="Schedule" [allowInline]="false">
</ej-schedule> 		Not applicable
Allow keyboard interactions Property: allowKeyboardNavigation

<ej-schedule id="Schedule" [allowKeyboardNavigation]="false">
</ej-schedule> 		Property: allowKeyboardInteraction

<ejs-schedule [allowKeyboardInteraction]="false">
</ejs-schedule>
Enable resizing of appointments Property: enableAppointmentResize

<ej-schedule id="Schedule" [enableAppointmentResize]="false">
</ej-schedule> 		Property: allowResizing

<ejs-schedule [allowResizing]="false">
</ejs-schedule>
Blocking time intervals Property: blockoutSettings

<ej-schedule id="Schedule" [blockoutSettings.enable]="true" [blockoutSettings.dataSource]=blockDataSource blockoutSettings.id="id" blockoutSettings.startTime="BlockStartTime" blockoutSettings.endTime="BlockEndTime" blockoutSettings.subject="BlockSubject" blockoutSettings.isBlockAppointment="IsBlockAppointment">
</ej-schedule>
TS
this.blockDataSource = [{
BlockId: 101,
BlockStartTime: new Date(2017, 4, 5, 10, 0),
BlockEndTime: new Date(2017, 4, 5, 11, 0),
BlockSubject: "Service",
IsBlockAppointment: true}]; 		Property: isBlock

<ejs-schedule [eventSettings]="eventSettings">
</ejs-schedule>
TS
public data: Object[] = [{
Id: 2,
Subject: 'Paris',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 15, 12, 30),
IsAllDay: false,
IsBlock: true,
}];
this.eventSettings= {
dataSource: this.data};
Categorizing the appointments Property: categorizeSettings

<ej-schedule id="Schedule" appointmentSettings.categorize="Categorize" [categorizeSettings.enable]="true" [categorizeSettings.allowMultiple]="true" [categorizeSettings.dataSource]="categorizeData" categorizeSettings.text="text" categorizeSettings.id="id" categorizeSettings.color="color" categorizeSettings.fontColor="fontColor">
</ej-schedule>
TS
this.dataSource = [{
Id: 1,
Subject: "Talk with Nature",
StartTime: new Date(2017, 11, 5, 10, 0),
EndTime: new Date(2017, 11, 5, 11, 0),
Categorize: "1"
}];
this.categorizeData = [{
text: "Blue Category",
id: 1,
color: "#43b496",
fontColor: "#ffffff"
}]; 		Not applicable
Setting cell height Property: cellHeight

<ej-schedule id="Schedule" cellHeight="40px">
</ej-schedule> 		Not applicable
Cell template Property: workCellsTemplateId

<ej-schedule id="Schedule" allDayCellsTemplateId="#allDayTemplate" workCellsTemplateId="#workTemplate">
</ej-schedule> 		Property: cellTemplate

<ejs-schedule width='100%' height='650px'>
<ng-template #cellTemplate>
You can add template elements here</ng-template>
</ejs-schedule>
Setting cell width Property: cellWidth

<ej-schedule id="Schedule" cellWidth="100px">
</ej-schedule> 		Not applicable
CSS class Property: cssClass

<ej-schedule id="Schedule" e-cssClass= "customStyle">
</ej-schedule> 		Property: cssClass

<ejs-schdule cssClass="customStyle">
</ejs-schedule>
Enabling Context-menu option Property: contextMenuSettings

<ej-schedule id="Schedule" [contextMenuSettings.enable]="true" [contextMenuSettings.menuItems]=scheduleMenuItems>
TS
this.scheduleMenuItems = {
appointment: [{
id: "open",
text: "Open Appointment"}]
}; 		Not applicable
Current view Property: currentView

<ej-schedule id="Schedule" currentView="workWeek">
</ej-schedule> 		Property: currentView

<ejs-schedule [(currentView)]="currentView">
</ejs-schedule>
TS
this.currentView='Week';
Date format Property: dateFormat

<ej-schedule id="Schedule" dateFormat="yyyy/MM/dd">
</ej-schedule> 		Property: dateFormat

<ejs-schedule [dateFormat]="dateFormat"> </ejs-schedule>
TS
this.dateFormat= "yyyy/MM/dd";
Date header template Property: dateHeaderTemplateId

<ej-schedule id="Schedule" dateHeaderTemplateId="#dateTemplate">
</ej-schedule> 		<ejs-schedule width='100%' height='650px'>
<ng-template #dateHeaderTemplate>
You can add template elements here
</ng-template>
</ejs-schedule>
Editor template Not Applicable Property: editorTemplate

<ejs-schedule width='100%' height='650px'>
<ng-template #editorTemplate>
You can add template elements here
</ng-template>
</ejs-schedule>
Enable load on demand Property: enableLoadOnDemand

<ej-schedule id="Schedule" [enableLoadOnDemand]="false">
</ej-schedule> 		Not applicable
Enable persistence Property: enablePersistence

<ej-schedule id="Schedule" [enablePersistence]="false">
</ej-schedule> 		Property: enablePersistence

<ejs-schedule [enablePersistence]="false">
</ejs-schedule>
Enable RTL Property: enableRTL

<ej-schedule id="Schedule" [enableRTL]="false">
</ej-schedule> 		Property: enableRTL

<ejs-schedule [enableRTL]="false">
</ejs-schedule>
Setting end hour of the scheduler Property: endHour

<ej-schedule id="Schedule" [endHour]="18">
</ej-schedule> 		Property: endHour

<ejs-schedule [endHour]="endHour">
</ejs-schedule>
TS
this.endHour='18:00';
Setting first day of the week Property: firstDayOfWeek

<ej-schedule id="Schedule" firstDayOfWeek="Tuesday">
</ej-schedule> 		Property: firstDayOfWeek

<ejs-schedule [firstDayOfWeek]="firstDayOfWeek">
</ejs-schedule>
TS
this.firstDayOfWeek= 1;
Height of the scheduler Property: height

<ej-schedule id="Schedule" height="500px">
</ej-schedule> 		Property: height

<ejs-schedule height='650px'>
</ejs-schedule>
Locale Property: locale

<ej-schedule id="Schedule" locale="fr-CH">
</ej-schedule> 		Property: locale

<ejs-schedule locale='fr-CH'>
</ejs-schedule>
Priority settings for appointments Property: prioritySettings

<ej-schedule id="Schedule" appointmentSettings.priority="Priority" [prioritySettings.enable]="true" [prioritySettings.dataSource]="priorityData" prioritySettings.text="text" prioritySettings.value="value">
</ej-schedule>
TS
this.priorityData = [{
text: "Low",
value: "low"}]; 		Not applicable
Read only Property: readOnly

<ej-schedule id="Schedule" [readOnly]="true">
</ej-schedule> 		Property: readonly

<ejs-schedule [readonly]="readonly">
</ejs-schedule>
TS
this.readonly= true;
Reminder settings Property: reminderSettings

<ej-schedule id="Schedule" [reminderSettings.enable]="true" [reminderSettings.alertBefore]="10">
</ej-schedule> 		Not applicable
Resource header template Property: resourceHeaderTemplateId

<ej-schedule id="Schedule" resourceHeaderTemplateId="#resTemplate" appointmentSettings.resourceFields="RoomId">
<e-resources>
<e-resource field="RoomId" title="Room" name="Rooms" [resourceSettings]=resourceData></e-resource>
</e-resources>
</ej-schedule>
TS
this.resourceData = {
dataSource: [{
ResourceText: "ROOM1",
id: 1,
ResourceColor: "orange"}],
text: "ResourceText",
id: "id",
color: "ResourceColor"}; 		Property: resourceHeaderTemplate

<ejs-schedule width='100%' height='650px'>
<ng-template #resourceHeaderTemplate>
<e-resources>
<e-resource field='ProjectId' title='Project' name='Project' [allowMultiple]='allowMultiple' [dataSource]='ProjectDataSource' textField='text' idField='id' colorField='color'>
</e-resource>
</e-resources>
</ejs-schedule>
TS
this.ProjectDataSource: Object[] = [
{ text: 'PROJECT 1', id: 1, color: '#cb6bb2'}];
Current date of the scheduler Property: currentDate

<ej-schedule id="Schedule" [currentDate]=currentDate>
</ej-schedule>
TS
this.currentDate = new Date(2017, 1, 7); 		Property: selectedDate

<ejs-schedule [selectedDate]="selectedDate">
</ejs-schedule>
TS
this.selectedDate = new Date(2018, 3, 4);
Show all day row Property: showAllDayRow

<ej-schedule id="Schedule" [showAllDayRow]="true">
</ej-schedule> 		Not applicable
Show appointment navigator Property: showAppointmentNavigator

<ej-schedule id="Schedule" [showAppointmentNavigator]="true">
</ej-schedule> 		Not applicable
Show delete confirmation dialog Property: showDeleteConfirmationDialog

<ej-schedule id="Schedule" [showDeleteConfirmationDialog]="true">
</ej-schedule> 		Not applicable
Show header bar Property: showHeaderBar

<ej-schedule id="Schedule" [showHeaderBar]="false">
</ej-schedule> 		Property: showHeaderBar

<ejs-schedule [showHeaderBar]="showHeaderBar">
</ejs-schedule>
TS
this.showHeaderBar = true;
Show location field in event window Property: showLocationField

<ej-schedule id="Schedule" [showLocationField]="false">
</ej-schedule> 		Not applicable
Show time zone fields in event window Property: showTimeZoneFields

<ej-schedule id="Schedule" [showTimeZoneFields]="false">
</ej-schedule> 		Not applicable
Show previous and next month dates in month view Property: showNextPrevMonth

<ej-schedule id="Schedule" [showNextPrevMonth]="false">
</ej-schedule> 		Not applicable
Show overflow button Property: showOverflowButton

<ej-schedule id="Schedule" [showOverflowButton]="true">
</ej-schedule> 		Property: rowAutoHeight

<ejs-schedule [rowAutoHeight]="true">
</ejs-schedule>
Show quick popup Property: showQuickWindow

<ej-schedule id="Schedule" [showQuickWindow]="false">
</ej-schedule> 		Property: showQuickInfo

<ejs-schedule [showQuickInfo]="false">
</ejs-schedule>
Show current time indicator Property: showCurrentTimeIndicator

<ej-schedule id="Schedule" [showCurrentTimeIndicator]="false">
</ej-schedule> 		Property: showTimeIndicator

<ejs-schedule [showTimeIndicator]="showTimeIndicator">
</ejs-schedule>
TS
this.showTimeIndicator=false;
Show week number Not Applicable Property: showWeekNumber

<ejs-schedule [showWeekNumber]="showWeekNumber">
</ejs-schedule>
TS
this.showWeekNumber=true;
Show weekend days Property: showWeekend

<ej-schedule id="Schedule" [showWeekend]="false">
</ej-schedule> 		Property: showWeekend

<ejs-schedule [showWeekend]="showWeekend">
</ejs-schedule>
TS
this.showWeekend=false;
Setting start hour of the scheduler Property: startHour

<ej-schedule id="Schedule" [startHour]="7">
</ej-schedule> 		Property: startHour

<ejs-schedule [startHour]="startHour">
</ejs-schedule>
TS
this.startHour = '07:00';
Setting time mode on scheduler Property: timeMode

<ej-schedule id="Schedule" timeMode="ej.Schedule.TimeMode.Hour24">
</ej-schedule> 		Not applicable
Setting timezone for scheduler Property: timeZone

<ej-schedule id="Schedule" timeZone= "UTC +05:30">
</ej-schedule> 		Property: timezone

<ejs-schedule timezone="UTC">
</ejs-schedule>
Views in scheduler Property: views

<ej-schedule id="Schedule" [views]="views">
</ej-schedule>
TS
this.views = ["Day", "Week", "WorkWeek", "Month"]; 		Property: views

<ejs-schedule width='100%' height='650px'>
<e-views>
<e-view option="Day"></e-view>
<e-view option="Week"></e-view>
<e-view option="WorkWeek"></e-view>
<e-view option="Month"></e-view>
</e-views>
</ejs-schedule>
Width of the scheduler Property: width

<ej-schedule id="Schedule" width="70%">
</ej-schedule> 		Property: width

<ejs-schedule width='100%'>
</ejs-schedule>
Working days Property: workWeek

<ej-schedule id="Schedule" [workWeek]="workWeek">
</ej-schedule>
TS
this.workWeek=["Monday", "Tuesday", "Friday"]; 		Property: workDays

<ejs-schedule [workDays]="workDays">
</ejs-schedule>
TS
this.workDays= [1, 3, 5];
Working hours Property: workHours

<ej-schedule id="Schedule" [workHours.highlight]="true" [workHours.start]="8" [workHours.end]="16">
</ejs-schedule> 		Property: workHours

<ejs-schedule [workHours]="workHours">
</ejs-schedule>
TS
this.workHours = { highlight: true, start: '9:00', end: '11:00' };

Resources

Behavior API in Essential® JS 1 API in Essential® JS 2
To define resource datasource Property: resources

<ej-schedule id="Schedule" appointmentSettings.resourceFields="RoomId">
<e-resources>
<e-resource field="RoomId" title="Room" name="Rooms" [allowMultiple]="true" [resourceSettings]=ownerData></e-resource>
</e-resources>
</ej-schedule>
TS
this.ownerData = {
dataSource: [{
OwnerText: "Nancy",
id: 1,
OwnerColor: "#f8a398"}],
text: "OwnerText",
id: "id",
color: "OwnerColor"}; 		Property: resources

<ejs-schedule width='100%' height='550px'>
<e-resources>
<e-resource field='ProjectId' title='Project' [dataSource]='resourceDataSource' name='Project' textField='text' idField='id' colorField='color'>
</e-resource>
</e-resources>
</ejs-schedule>
TS
this.ProjectDataSource: Object[] = [
{ text: 'PROJECT 1', id: 1, color: '#cb6bb2'}];
Allowing multiple selection of resources in event window Property: e-allowMultiple

<ej-schedule id="Schedule" appointmentSettings.resourceFields="RoomId">
<e-resources>
<e-resource field="RoomId" title="Room" name="Rooms" [allowMultiple]="true" [resourceSettings]=roomData></e-resource>
<e-resource field="OwnerId" title="Owner" name="Owners" [allowMultiple]="true" [resourceSettings]=ownerData></e-resource>
</e-resources>
</ej-schedule>
TS
this.roomData = {
dataSource: [{
RoomText: "Room1",
id: 1,
RoomColor: "#f8a398"},
{ RoomText: "Room2",
id: 2,
RoomColor: "#f8a398"}],
text: "RoomText",
id: "id",
color: "RoomColor"};
this.ownerData = {
dataSource: [{
OwnerText: "Nancy",
id: 1,
OwnerColor: "#f8a398"},
{ OwnerText: "Steven",
id: 2,
OwnerColor: "#f8a398"}],
text: "OwnerText",
id: "id",
color: "OwnerColor"}; 		Property: allowMultiple

<ejs-schedule width='100%' height='550px'>
<e-resources>
<e-resource field='ProjectId' title='Room' [dataSource]='ProjectDataSource' name='Project' textField='text' idField='id' colorField='color'>
</e-resource>
</e-resources>
</ejs-schedule>
TS
this.ProjectDataSource: Object[] = [
{ text: 'PROJECT 1', id: 1, color: '#cb6bb2'},
{ text: 'PROJECT 2', id: 2, color: '#cb6bb2'}];
Setting different work hours for each resource

<ej-schedule id="Schedule" appointmentSettings.resourceFields="RoomId" [group]="group">
<e-resources>
<e-resource field="RoomId" title="Room" name="Rooms" [allowMultiple]="true" [resourceSettings]=roomData></e-resource>
</e-resources>
</ej-schedule>
TS
this.group = {
resources: ["Rooms"]};
this.roomData= {
dataSource: [{ text: "Nancy", id: 1, color: "#ffaa00", on: 10, off: 18, customDays: ["monday", "wednesday", "friday"]
}],
text: "text", id: "id", groupId: "groupId", color: "color", start: "on", end: "off", workWeek: "customDays"}; 		<ejs-schedule width='100%' height='550px' [group]="group">
<e-resources>
<e-resource field='ProjectId' title='Project' [dataSource]='ProjectDataSource' name='Project' textField='text' idField='id' colorField='color' workDaysField= 'workDays' startHourField= 'startHour' endHourField= 'endHour'>
</e-resource>
<e-resource field='CategoryId' title='Category' [dataSource]='CategoryDataSource' [allowMultiple]='allowMultiple' name='Categories' textField='text' idField='id' colorField='color' workDaysField= 'workDays' startHourField= 'startHour' endHourField= 'endHour'
</e-resource>
</e-resources>
</ejs-schedule>
TS
this.group = {resources: ['Project']};
this.ProjectDataSource: Object[] = [
{ text: 'PROJECT 1', id: 1, color: '#cb6bb2',workDays: [1, 2, 4, 5],startHour: '07:00', endHour: '13:00'}];
this.CategoryDataSource: Object[] = [
{ text: 'Development', id: 1, color: '#1aaa55',workDays: [1, 2, 3, 4, 5],startHour: '09:00', endHour: '13:00'}];
}];

Group

Behavior API in Essential® JS 1 API in Essential® JS 2
To group the resources in scheduler layout Property: group

<ej-schedule id="Schedule" width="100%" height="525px" appointmentSettings.resourceFields="OwnerId,RoomId" [group]="group">
<e-resources>
<e-resource field="OwnerId" title="Owner" name="Owners" [resourceSettings]="ownerData"></e-resource>
<e-resource field="RoomId" title="Room" name="Rooms" [allowMultiple]="true" [resourceSettings]="roomData"></e-resource>
</e-resources>
</ej-schedule>
TS
this.group = {
resources: ["Owners", "Rooms"]};
this.ownerData = {
dataSource: [{
OwnerText: "Nancy",
id: 1,
OwnerColor: "#f8a398"}],
text: "OwnerText",
id: "id",
color: "OwnerColor"};
this.roomData = {
dataSource: [{
text: "Room1",
id: 1,
color: "#f8a398"}],
text: "text",
id: "id",
color: "color"}; 		Property: group

<ejs-schedule width='100%' height='550px' [group]="group">
<e-resources>
<e-resource field='ProjectId' title='Project' [dataSource]='ProjectDataSource' name='Projects' textField='text' idField='id' colorField='color'>
</e-resource>
<e-resource field='CategoryId' title='Category' [dataSource]='CategoryDataSource' name='Categories' textField='text' idField='id' colorField='color'>
</e-resource>
</e-resources>
</ejs-schedule>
TS
this.group = {resources: ['Project','Category'] };
this.ProjectDataSource: Object[] = [
{ text: 'PROJECT1', id: 1, color: '#cb6bb2'}];
this.CategoryDataSource: Object[] = [
{ text: 'Testing', id: 1, color: '#cb6bb2'}];
Allow group editing Property: allowGroupEditing

<ej-schedule id="Schedule" appointmentSettings.resourceFields="RoomId">
<e-resources>
<e-resource field="RoomId" title="Room" name="Rooms" [allowMultiple]="true" [resourceSettings]="ownerData" [group]="group"></e-resource>
</e-resources>
</ej-schedule>
TS
this.group = {
resources: ["Owners", "Rooms"], [allowGroupEditing]= "true"};
this.ownerData = {
dataSource: [{
OwnerText: "Nancy",
id: 1,
OwnerColor: "#f8a398"},
{ OwnerText: "Steven",
id: 2,
OwnerColor: "#f8a398"}],
text: "OwnerText",
id: "id",
color: "OwnerColor"}; 		Property: allowGroupEdit

<ejs-schedule width='100%' height='550px' [group]="group">
<e-resources>
<e-resource field='RoomId' title='Room' [dataSource]='resourceDataSource' name='Room' textField='text' idField='id' colorField='color'>
</e-resource>
</e-resources>
</ejs-schedule>
TS
this.group = {allowGroupEdit: true, resources:['Room'] };
this.ProjectDataSource: Object[] = [
{ text: 'PROJECT1', id: 1, color: '#cb6bb2'},
{ text: 'PROJECT2', id: 2, color: '#cb6bb2'},
{ text: 'PROJECT3', id: 2, color: '#cb6bb2'}];
Grouping resources by date Not applicable Property: byDate

<ejs-schedule [group]="group">
<e-resources>
<e-resource field='ProjectId' title='Project' [dataSource]='ProjectDataSource' name='Project' textField='text' idField='id' colorField='color'>
</e-resource>
</e-resources>
</ejs-schedule>
this.group = {byDate: true, resources:['Project'] };
TS
this.ProjectDataSource: Object[] = [
{ text: 'PROJECT1', id: 1, color: '#cb6bb2'},
{ text: 'PROJECT2', id: 2, color: '#cb6bb2'}];
Grouping resources based on its group ID Not applicable Property: byGroupId

<ejs-schedule width='100%' height='550px' [group]="group">
<e-resources>
<e-resource field='ProjectId' title='Choose Project' name='Projects' [dataSource]='projectDataSource' textField='text' idField='id' colorField='color'>
</e-resource>
<e-resource field='CategoryId' title='Category' name='Categories' [dataSource]='categoryDataSource' [allowMultiple]='allowMultiple' textField='text' idField='id' groupIDField: 'groupID' colorField='color'>
</e-resource>
</e-resources>
</ejs-schedule>
TS
this.group = {byGroupID: false, resources:['Project','Category'] };
this.ProjectDataSource: Object[] = [
{ text: 'PROJECT1', id: 1, color: '#cb6bb2'},
{ text: 'PROJECT2', id: 2, color: '#cb6bb2'}];
this.categoryDataSource: Object[] = [
{ text: 'Testing', id: 1, groupId: 1, color: '#cb6bb2'},
{ text: 'Development', id: 2, groupId: 2, color: '#cb6bb2'},
{ text: 'Documentation', id: 3, groupId: 2, color: '#cb6bb2'}];
Enabling compact view on mobile mode Not applicable Property: enableCompactView

<ejs-schedule width='100%' height='550px' [group]="group">
<e-resources>
<e-resource field='ProjectId' title='Project' [dataSource]='ProjectDataSource' name='Project' textField='text' idField='id' colorField='color'>
</e-resource>
</e-resources>
</ejs-schedule>
TS
this.group = {enableCompactView: false, resources:['Project'] };
this.ProjectDataSource: Object[] = [
{ text: 'PROJECT1', id: 1, color: '#cb6bb2'}];
Header tooltip template Not applicable Property: headerTooltipTemplate

<ejs-schedule [group]="group">
<e-resources>
<e-resource field='ProjectId' title='Project' [dataSource]='ProjectDataSource' name='Project' textField='text' idField='id' colorField='color'>
</e-resource>
</e-resources>
</ejs-schedule>
TS
this.group = {headerTooltipTemplate: '#resourceHeader', resources:['Project'] };
this.ProjectDataSource: Object[] = [
{ text: 'PROJECT1', id: 1, color: '#cb6bb2'}];

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

<ejs-schedule width='100%' height='650px' [(currentView)]="currentView">
<e-header-rows>
<e-header-row option='Month'>
</e-header-row>
<e-header-row option='Week'>
</e-header-row>
<e-header-row option='Date'>
</e-header-row>
</e-header-rows>
<e-views>
<e-view displayName='Timeline Month' option='TimelineMonth' [interval]="monthInterval"></e-view>
</e-views>
</ejs-schedule>
TS
this.monthInterval= 12;
this.currentView='TimelineMonth';

TimeScale

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

<ej-schedule id="Schedule" [timeScale.enable]="true">
</ej-schedule> 		Property: enable

<ejs-schedule [timeScale]="timeScale">
</ejs-schedule>
TS
this.timeScale= { enable: true};
Setting major interval on time scale Property: timeScale.majorSlot

<ej-schedule id="Schedule" [timeScale.enable]="true" [timeScale.majorSlot]="60">
</ej-schedule> 		Property: interval

<ejs-schedule [timeScale]="timeScale">
</ejs-schedule>
TS
this.timeScale= { enable: true, interval: 60};
Setting slot count on time scale Property: timeScale.minorSlotCount

<ej-schedule id="Schedule" [timeScale.enable]="true" [timeScale.majorSlot]="60" [timeScale.minorSlotCount]="6">
</ej-schedule> 		Property: slotCount

<ejs-schedule [timeScale]="timeScale">
</ejs-schedule>
TS
this.timeScale= { enable: true, interval: 60, slotCount: 6 };
Defining major slot template Property: timeScale.majorSlotTemplateId

<ej-schedule id="Schedule" [timeScale.enable]="true" [timeScale.majorSlot]="60" [timeScale.minorSlotCount]="6" [timeScale.majorSlotTemplateId]="#majorTemplate">
</ej-schedule> 		Property: majorSlotTemplate

<ejs-schedule [timeScale]="timeScale">
<ng-template #majorSlotTemplate>
You can add template elements here
</ng-template>
</ejs-schedule>
Defining minor slot template Property: timeScale.minorSlotTemplateId

<ej-schedule id="Schedule" [timeScale.enable]="true" [timeScale.majorSlot]="60" [timeScale.minorSlotCount]="6" [timeScale.minorSlotTemplateId]="#minorTemplate">
</ej-schedule> 		Property: minorSlotTemplate

<ejs-schedule [timeScale]="timeScale">
<ng-template #minorSlotTemplate>
You can add template elements here
</ng-template>
</ejs-schedule>

Quick info templates

Behavior API in Essential® JS 1 API in Essential® JS 2
Template for quick popup Not applicable Property: quickInfoTemplates

<ejs-schedule width='100%' height='550px'>
<ng-template #quickInfoTemplatesHeader>You can add template elements here</ng-template>
<ng-template #quickInfoTemplatesContent>You can add template elements here</ng-template>
<ng-template #quickInfoTemplatesFooter>You can add template elements here</ng-template>
</ejs-schedule>

Event settings

Behavior API in Essential® JS 1 API in Essential® JS 2
Datasource for events Property: appointmentSettings.dataSource

<ej-schedule id="Schedule" [appointmentSettings.dataSource]=dataSource>
</ej-schedule>
TS
this.dataSource = [{
Id: 1,
Subject: "Testing",
StartTime: new Date(2017, 1, 7, 6, 0),
EndTime: new Date(2017, 1, 7, 7, 30)}]; 		Property: dataSource

<ejs-schedule [eventSettings]="eventSettings">
</ejs-schedule>
TS
public data: Object[] = [{
Id: 2,
Subject: 'Paris',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 15, 12, 30),
IsAllDay: false,
RecurrenceID: 10,
}];
this.eventSettings= {
dataSource: this.data};
Appointment fields <ej-schedule id="Schedule" [appointmentSettings.dataSource]="appointments">
</ej-schedule>
TS
this.appointments = [{
Id: 1,
Subject: "Testing",
StartTime: new Date(2017, 1, 7, 6, 0),
EndTime: new Date(2017, 1, 7, 7, 30)}]; 		<ejs-schedule [eventSettings]="eventSettings">
</ejs-schedule>
TS
public data: Object[] = [{
Id: 2,
Subject: 'Paris',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 15, 12, 30),
IsAllDay: false,
RecurrenceID: 10,
}];
this.eventSettings= {
dataSource: this.data,fields: {
id: 'Id',
subject: { name: 'Subject' },
isAllDay: { name: 'IsAllDay' },
location: { name: 'Location' },
description: { name: 'Description' },
recurrenceID : { name: 'RecurrenceID' }
}};
Enabling tooltip for appointments Property: tooltipSettings.enable

<ej-schedule id="Schedule" [tooltipSettings.enable]="true">
</ej-schedule>
Note: Here tooltip setting for events is maintained separately		 Property: enableTooltip

<ejs-schedule [eventSettings]="eventSettings">
</ejs-schedule>
TS
this.eventSettings= {enableTooltip: true};
Tooltip template for appointments Property: tooltipSettings.templateId

<ej-schedule id="Schedule" [tooltipSettings.enable]="true" tooltipSettings.templateId="#tooltipTemplate">
</ej-schedule>
Note: Here tooltip setting for events is maintained separately		 Property: tooltipTemplate

<ejs-schedule [eventSettings]="eventSettings">
</ejs-schedule>
TS
this.eventSettings= {enableTooltip: true, tooltipTemplate: this.tooltipTemplate};
Template for appointments Property: appointmentTemplateId

<ej-schedule id="Schedule" appointmentTemplateId="#appTemplate">
</ej-schedule> 		Property: template

<ejs-schedule [eventSettings]="eventSettings">
</ejs-schedule>
TS
this.eventSettings= {template: this.eventTemplate };
Query Property: appointmentSettings.query

<ej-schedule id="Schedule" [appointmentSettings.dataSource]=dataManager [appointmentSettings.query]=query>
</ej-schedule>
TS
this.dataManager = ej.DataManager({
url: "http://mvc.syncfusion.com/OdataServices/Northwnd.svc/"
});
this.query = ej.Query().from("Events").take(10); 		Property: query

<ejs-schedule [eventSettings]="eventSettings">
</ejs-schedule>
private dataManger: DataManager = new DataManager({
url: 'https://services.syncfusion.com/angular/production/api/Schedule',
adaptor: new ODataAdaptor });
this.eventSettings = { dataSource: this.dataManger, query: new Query().addParams('ej2schedule', 'true') };
Define which resource level color applied to events Not applicable Property: resourceColorField

<ejs-schedule [eventSettings]="eventSettings" [group]="group">
<e-resources>
<e-resource field='RoomId' title='Room' [dataSource]='roomData' name='Rooms' textField='RoomText' idField='Id' groupIDField='RoomGroupId' colorField='RoomColor'>
</e-resource>
<e-resource field='OwnerId' title='Owner' [dataSource]='ownerData' [allowMultiple]='allowMultiple' name='Owners' textField='OwnerText' idField='Id' groupIDField='OwnerGroupId' colorField='OwnerColor'>
</e-resource>
</e-resources>
</ejs-schedule>
public roomData: Object[] = [
{ RoomText: 'ROOM 1', Id: 1, RoomGroupId: 1, RoomColor: '#cb6bb2'}
];
public ownerData: Object[] = [
{ OwnerText: 'Nancy', Id: 1, OwnerGroupId: 1, OwnerColor: '#ffaa00'}];
this.group ={ resources: ['Rooms', 'Owners'] };
this.allowMultiple = true;
this.eventSettings= {resourceColorField: 'Owners' };

Methods

Behavior API in Essential® JS 1 API in Essential® JS 2
To add appointments manually Method: saveAppointment()

export class AppComponent {
@ViewChild('schedule') Schedule: EJComponents<any, any>;
ngAfterViewInit(){
var data = {
Id: 1,
Subject: "Testing",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 12, 00)};
this.Schedule.widget.saveAppointment(data);
}
} 		Method: addEvent()

@ViewChild('schedule') Schedule: ScheduleComponent;
public data = {
Id: 1,
Subject: "New Event",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 12, 00)};
this.Schedule.addEvent(data);
To add resources dynamically Method: addResource()

export class AppComponent {
@ViewChild('schedule') Schedule: EJComponents<any, any>;
ngAfterViewInit(){
var data = { text: "Paul", id: 1, groupId: 3, color: "#cc99ff" };
var index = 0;
this.Schedule.widget.addResource(data, "Owners", index);
}
} 		Method: addResource()

@ViewChild('schedule') Schedule: ScheduleComponent;
public data = { text: "Paul", id: 3, groupId: 1, color: "#cc99ff" };
public index = 0;
this.Schedule.addResource(data, "Owners", index);
databind Not applicable Method: dataBind()

@ViewChild('schedule') Schedule: ScheduleComponent;
this.Schedule.dataBind()
Delete appointment manually Method: deleteAppointment()

export class AppComponent {
@ViewChild('schedule') Schedule: EJComponents<any, any>;
ngAfterViewInit(){
var data = {
Id: 1,
Subject: "Testing",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 12, 00)};
this.Schedule.widget.deleteAppointment(data);
}
} 		Method: deleteEvent()

@ViewChild('schedule') Schedule: ScheduleComponent;
public data = {
Id: 1,
Subject: "Old Event",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 12, 00)};
this.Schedule.deleteEvent(data);
destroy scheduler Method: destroy()

export class AppComponent {
@ViewChild('schedule') Schedule: EJComponents<any, any>;
ngAfterViewInit(){
this.Schedule.widget.destroy();
}
} 		Method: destroy()

@ViewChild('schedule') Schedule: ScheduleComponent;
this.Schedule.destroy()
Get cell details Method: getSlotByElement()

export class AppComponent {
@ViewChild('schedule') Schedule: EJComponents<any, any>;
ngAfterViewInit(){
var $td = $(".e-draggableworkarea table tr td").first();
var slotDetails =this.Schedule.widget.getSlotByElement($td);
}
} 		Method: getCellDetails()

@ViewChild('schedule') Schedule: ScheduleComponent;
public td = document.querySelector(".e-work-cells");
piblic cellDetail = this.Schedule.getCellDetails(td);
Get current view appointments Method: getCurrentViewAppointments()

export class AppComponent {
@ViewChild('schedule') Schedule: EJComponents<any, any>;
ngAfterViewInit(){
var currApp= this.Schedule.widget.getCurrentViewAppointments(); 		Method: getCurrentViewEvents()

@ViewChild('schedule') Schedule: ScheduleComponent;
public currApp = this.Schedule.getCurrentViewEvents();
Get entire appointment collection Method: getAppointments()

export class AppComponent {
@ViewChild('schedule') Schedule: EJComponents<any, any>;
ngAfterViewInit(){
var AppDetails= this.Schedule.widget.getAppointments(); 		Method: getEvents()

@ViewChild('schedule') Schedule: ScheduleComponent;
public AppDetails = this.Schedule.getEvents();
Get current view dates Not applicable Method: getCurrentViewDates()

@ViewChild('schedule') Schedule: ScheduleComponent;
public AppDetails = this.Schedule.getCurrentViewDates();
Get event details Not applicable Method: getEventDetails()

@ViewChild('schedule') Schedule: ScheduleComponent;
public AppDetails = this.Schedule.getEventDetails(appElement);
Get occurrences using event ID Not applicable Method: getOccurrencesByID()

@ViewChild('schedule') Schedule: ScheduleComponent;
public recCollection = this.Schedule.getOccurrencesByID(1);
Get occurrences in the provided date range Not applicable Method: getOccurrencesByRange()

@ViewChild('schedule') Schedule: ScheduleComponent;
public sDate = new Date(2018, 1, 12);
public eDate = new Date(2018, 1, 17);
public resCollection = this.Schedule.getOccurrencesByRange(sDate, eDate);
Get resource details using index Not applicable Method: getResourceByIndex()

@ViewChild('schedule') Schedule: ScheduleComponent;
public resCollection = this.Schedule.getResourceByIndex(2);
Show spinner Not applicable Method: showSpinner()

@ViewChild('schedule') Schedule: ScheduleComponent;
this.Schedule.showSpinner()
Hide spinner Not applicable Method: hideSpinner()

@ViewChild('schedule') Schedule: ScheduleComponent;
this.Schedule.hideSpinner()
Check whether the time slot is available Not applicable Method: isSlotAvailable()

@ViewChild('schedule') Schedule: ScheduleComponent;
public sTime = new Date(2018, 1, 14, 09, 30);
public etime = new Date(2018, 1, 14, 10, 30);
public resCollection = this.Schedule.isSlotAvailble(sTime, eTime);
Open the event window manually Not applicable Method: openEditor()

@ViewChild('schedule') Schedule: ScheduleComponent;
public td = document.querySelector(".e-content-table tbody tr td");
public cellDetail = this.schedule.getCellDetails(td);
this.Schedule.openEditor(cellDetail);
Refresh the scheduler Method: refresh()

export class AppComponent {
@ViewChild('schedule') Schedule: EJComponents<any, any>;
ngAfterViewInit(){
this.Schedule.widget.refresh();
}
} 		Method: refresh()

@ViewChild('schedule') Schedule: ScheduleComponent;
this.Schedule.refresh()
Refresh the events Method: refreshAppointments()

export class AppComponent {
@ViewChild('schedule') Schedule: EJComponents<any, any>;
ngAfterViewInit(){
this.Schedule.widget.refreshAppointments();
}
} 		Method: refreshEvents()

@ViewChild('schedule') Schedule: ScheduleComponent;
this.Schedule.refreshEvents()
Refresh the scroller Method: refreshScroller()

export class AppComponent {
@ViewChild('schedule') Schedule: EJComponents<any, any>;
ngAfterViewInit(){
this.Schedule.widget.refreshScroller();
}
} 		Not applicable
To remove resources dynamically Method: removeResource()

export class AppComponent {
@ViewChild('schedule') Schedule: EJComponents<any, any>;
ngAfterViewInit(){
var resID = 1;
this.Schedule.widget.removeResource(resID, "Owners");
}
} 		Method: removeResource()

@ViewChild('schedule') Schedule: ScheduleComponent;
public data = { text: "Paul", id: 3, groupId: 1, color: "#cc99ff" };
public index = 0;
this.Schedule.removeResource(index, "Owners");
Export scheduler as PDF Method: exportSchedule()

export class AppComponent {
@ViewChild('schedule') Schedule: EJComponents<any, any>;
ngAfterViewInit(){
this.Schedule.widget.exportSchedule("ActionName", null, null);
}
} 		Not Applicable
Export scheduler events to ICS Method: exportSchedule()

export class AppComponent {
@ViewChild('schedule') Schedule: EJComponents<any, any>;
ngAfterViewInit(){
this.Schedule.widget.exportSchedule("ActionName","ExportToICS", null);
}
} 		Method: exportToICalendar()

@ViewChild('schedule') Schedule: ScheduleComponent;
this.Schedule.exportToICalendar(fileName);
Import scheduler events from ICS Not Applicable Method: importToICalendar()

@ViewChild('schedule') Schedule: ScheduleComponent;
this.Schedule.importToICalendar(fileContent);
Export scheduler appointments in Excel file Method: exportToExcel()

export class AppComponent {
@ViewChild('schedule') Schedule: EJComponents<any, any>;
ngAfterViewInit(){
this.Schedule.widget.exportToExcel("ActionName", null, true);
}
} 		Method: exportToExcel()

@ViewChild('schedule') Schedule: ScheduleComponent;
let exportValues: ExportOptions = { fields: ['Id', 'Subject', 'StartTime', 'EndTime', 'Location'] };
this.Schedule.exportToExcel(exportValues);
Print the scheduler Method: print()

export class AppComponent {
@ViewChild('schedule') Schedule: EJComponents<any, any>;
ngAfterViewInit(){
this.Schedule.widget.print()
}
} 		Not applicable
Filter appointments Method: filterAppointments()

export class AppComponent {
@ViewChild('schedule') Schedule: EJComponents<any, any>;
ngAfterViewInit(){
var filter = [{ field: "Subject", operator: "contains", value: "with", predicate: "or" }];
var filteredApp = this.Schedule.widget.filterAppointments(filter);
}
} 		Not applicable
Search appointments Method: searchAppointments()

export class AppComponent {
@ViewChild('schedule') Schedule: EJComponents<any, any>;
ngAfterViewInit(){
var searchApp = this.Schedule.widget.searchAppointments("with");
}
} 		Not applicable
To edit appointments manually Not applicable Method: saveEvent()

@ViewChild('schedule') Schedule: ScheduleComponent;
public Data: Object[] = [{
Id: 1,
Subject: 'Conference',
StartTime: new Date(2018, 1, 12, 9, 0),
EndTime: new Date(2018, 1, 12, 10, 0),
IsAllDay: false}];
this.Schedule.saveEvent(Data);
Setting work hours Not applicable Method: setWorkHours()

@ViewChild('schedule') Schedule: ScheduleComponent;
this.Schedule.setWorkHours([new Date(2017, 9, 5)], '04:00', '08:00');
Scrolling to specific time Not applicable Method: scrollTo()

@ViewChild('schedule') Schedule: ScheduleComponent;
this.Schedule.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

<ej-schedule #schedule (actionBegin) = "onActionBegin($event)">
</ej-schedule>
TS
onActionBegin(e: any){} 		Event: actionBegin

<ejs-schedule (actionBegin)='onActionBegin($event)'>
</ejs-schedule>
TS
onActionBegin(args: any): void{}
Fires on the completion of each scheduler action Event: actionComplete

<ej-schedule #schedule (actionComplete) = "onActionComplete($event)">
</ej-schedule>
TS
onActionComplete(e: any){} 		Event: actionComplete

<ejs-schedule (actionComplete)='onActionComplete($event)'>
</ejs-schedule>
TS
onActionComplete(args: any): void{}
Fires when the scheduler action gets failed Not applicable Event: actionFailure

<ejs-schedule (actionFailure)='onActionFailure($event)'>
</ejs-schedule>
TS
onActionFailure(args: any): void{}
Fires on appointment hover Event: appointmentHover

<ej-schedule #schedule (appointmentHover) = "onAppointmentHover($event)">
</ej-schedule>
TS
onAppointmentHover(e: any){} 		Not applicable
Fires before an appointment gets created Event: beforeAppointmentCreate

<ej-schedule #schedule (beforeAppointmentCreate) = "onBeforeAppointmentCreate($event)">
</ej-schedule>
TS
onBeforeAppointmentCreate(e: any){} 		Event: actionBegin

<ejs-schedule (actionBegin)='onActionBegin($event)'>
</ejs-schedule>
TS
onActionBegin(args: any): void{ if(args.requestType == 'eventCreate') {} }
Fires before an appointment gets edited Event: beforeAppointmentChange

<ej-schedule #schedule (beforeAppointmentChange) = "onBeforeAppointmentChange($event)">
</ej-schedule>
TS
onBeforeAppointmentChange(e: any){} 		Event: actionBegin

<ejs-schedule (actionBegin)='onActionBegin($event)'>
</ejs-schedule>
TS
onActionBegin(args: any): void{ if(args.requestType == 'eventChange') {} }
Fires before an appointment gets deleted Event: beforeAppointmentRemove

<ej-schedule #schedule (beforeAppointmentRemove) = "onBeforeAppointmentRemove($event)">
</ej-schedule>
TS
onBeforeAppointmentRemove(e: any){} 		Event: actionBegin

<ejs-schedule (actionBegin)='onActionBegin($event)'>
</ejs-schedule>
TS
onActionBegin(args: any): void{ if(args.requestType == 'eventRemove') {} }
Fires before the context menu opens on scheduler Event: beforeContextMenuOpen

<ej-schedule #schedule (beforeContextMenuOpen) = "onBeforeContextMenuOpen($event)">
</ej-schedule>
TS
onBeforeContextMenuOpen(e: any){} 		Not applicable
Fires on cell click Event: cellClick

<ej-schedule #schedule (cellClick) = "onCellClick($event)">
</ej-schedule>
TS
onCellClick(e: any){} 		Event: cellClick

<ejs-schedule (cellClick)='onCellClick($event)'>
</ejs-schedule>
TS
onCellClick(args: any): void{}
Fires on cell double click Event: cellDoubleClick

<ej-schedule #schedule (cellDoubleClick) = "oncellDoubleClick($event)">
</ej-schedule>
TS
oncellDoubleClick(e: any){} 		Event: cellDoubleClick

<ejs-schedule (cellDoubleClick)='oncellDoubleClick($event)'>
</ejs-schedule>
TS
oncellDoubleClick(args: any): void{}
Fires on cell hover Event: cellHover

<ej-schedule #schedule (cellHover) = "onCellHover($event)">
</ej-schedule>
TS
onCellHover(e: any){} 		Not applicable
Fires once the scheduler is created Event: create

<ej-schedule #schedule (create) = "onCreate($event)">
</ej-schedule>
TS
onCreate(e: any){} 		Event: created

<ejs-schedule (created) ='onCreated($event)'>
</ejs-schedule>
TS
onCreated(args: any): void{}
Fires on data binding action Not applicable Event: dataBinding

<ejs-schedule (dataBinding) ='onDataBinding($event)'>
</ejs-schedule>
TS
onDataBinding(args: any): void{}
Fires after the data is bound to the control Not applicable Event: dataBound

<ejs-schedule (dataBound) ='onDataBound($event)'>
</ejs-schedule>
TS
onDataBound(args: any): void{}
Fires once the scheduler is destroyed Event: destroy

<ej-schedule #schedule (destroy) = "onDestroy($event)">
</ej-schedule>
TS
onDestroy(e: any){} 		Event: destroyed

<ejs-schedule (destroyed) ='onDestroyed($event)'>
</ejs-schedule>
TS
onDestroyed(args: any): void{}
Fires on event click Event: appointmentClick

<ej-schedule #schedule (appointmentClick) = "onAppointmentClick($event)">
</ej-schedule>
TS
onAppointmentClick(e: any){} 		Event: eventClick

<ejs-schedule (eventClick) ='onEventClick($event)'>
</ejs-schedule>
TS
onEventClick(args: any): void{}
Fires on event double click Event: appointmentDoubleClick

<ej-schedule #schedule (appointmentDoubleClick) = "onAppointmentDoubleClick($event)">
</ej-schedule>
TS
onAppointmentDoubleClick(e: any){} 		Not applicable
Fires for keyboard actions Event: keyDown

<ej-schedule #schedule (keyDown) = "onKeyDown($event)">
</ej-schedule>
TS
onKeyDown(e: any){} 		Not applicable
Fires on context menu item click Event: menuItemClick

<ej-schedule #schedule (menuItemClick) = "onMenuItemClick($event)">
</ej-schedule>
TS
onMenuItemClick(e: any){} 		Not applicable
Fires on navigation Event: navigation

<ej-schedule #schedule (navigation) = "onNavigation($event)">
</ej-schedule>
TS
onNavigation(e: any){} 		Event: navigating

<ejs-schedule (navigating) ='onNavigating($event)'>
</ejs-schedule>
TS
onNavigating(args: any): void{}
Fires on popup open Event: appointmentWindowOpen

<ej-schedule #schedule (appointmentWindowOpen) = "onAppointmentWindowOpen($event)">
</ej-schedule>
TS
onAppointmentWindowOpen(e: any){} 		Event: popupOpen

<ejs-schedule (popupOpen) ='onPopupOpen($event)'>
</ejs-schedule>
TS
onPopupOpen(args: any): void{}
Fires on dragging event Event: drag

<ej-schedule #schedule (drag) = "onDrag($event)">
</ej-schedule>
TS
onDrag(e: any){} 		Event: drag

<ejs-schedule (drag) ='onDrag($event)'>
</ejs-schedule>
TS
onDrag(args: any): void{}
Fires on drag start Event: dragStart

<ej-schedule #schedule (dragStart) = "onDragStart($event)">
</ej-schedule>
TS
onDragStart(e: any){} 		Event: dragStart

<ejs-schedule (dragStart) ='onDragStart($event)'>
</ejs-schedule>
TS
onDragStart(args: any): void{}
Fires on drag stop Event: dragStop

<ej-schedule #schedule (dragStop) = "onDragStop($event)">
</ej-schedule>
TS
onDragStop(e: any){} 		Event: dragStop

<ejs-schedule (dragStop) ='onDragStop($event)'>
</ejs-schedule>
TS
onDragStop(args: any): void{}
Fires on overflow button click Event: overflowButtonClick

<ej-schedule #schedule (overflowButtonClick) = "onOverflowButtonClick($event)">
</ej-schedule>
TS
onOverflowButtonClick(e: any){} 		Event: popupOpen

<ejs-schedule (popupOpen) ='onPopupOpen($event)'>
</ejs-schedule>
TS
onPopupOpen(args: any): void{ if(args.type == 'eventContainer') {} }
Fires on overflow button hover Event: overflowButtonHover

<ej-schedule #schedule (overflowButtonHover) = "onOverflowButtonHover($event)">
</ej-schedule>
TS
onOverflowButtonHover(e: any){} 		Not applicable
Fires when the reminder action takes place Event: reminder

<ej-schedule #schedule (reminder) = "onReminder($event)">
</ej-schedule>
TS
onReminder(e: any){} 		Not applicable
Fires on resizing event Event: resize

<ej-schedule #schedule (resize) = "onResize($event)">
</ej-schedule>
TS
onResize(e: any){} 		Event: resize

<ejs-schedule (resize) ='onResize($event)'>
</ejs-schedule>
TS
onResize(args: any): void{}
Fires on resize start Event: resizeStart

<ej-schedule #schedule (resizeStart) = "onResizeStart($event)">
</ej-schedule>
TS
onResizeStart(e: any){} 		Event: resizeStart

<ejs-schedule (resizeStart) ='onResizeStart($event)'>
</ejs-schedule>
TS
onResizeStart(args: any): void{}
Fires on resize stop Event: resizeStop

<ej-schedule #schedule (resizeStop) = "onResizeStop($event)">
</ej-schedule>
TS
onResizeStop(e: any){} 		Event: resizeStop

<ejs-schedule (resizeStop) ='onResizeStop($event)'>
</ejs-schedule>
TS
onResizeStop(args: any): void{}
Fires on rendering of every scheduler elements Event: queryCellInfo

<ej-schedule #schedule (queryCellInfo) = "onQueryCellInfo($event)">
</ej-schedule>
TS
onQueryCellInfo(e: any){} 		Event: renderCell

<ejs-schedule (renderCell) ='onRenderCell($event)'>
</ejs-schedule>
TS
onRenderCell(args: any): void{}
Fires before the event rendering on UI Not applicable Event: eventRendered

<ejs-schedule (eventRendered) ='onEventRendered($event)'>
</ejs-schedule>
TS
onEventRendered(args: any): void{}

You can refer to our Angular Scheduler feature tour page for feature highlights. You can also explore our Angular Scheduler example to see how to present and manipulate data.