Ej1 api migration in Angular Schedule component

13 Jul 202324 minutes to read

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

Scheduler

Properties

Behavior API in Essential JS 1 API in Essential JS 2
To change the display of days count in agenda view Property: 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-schdule [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-schdule [allowKeyboardInteraction]="false">
</ejs-schedule>
Enable resizing of appointments Property: enableAppointmentResize

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

<ejs-schdule [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">
</ej-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://ej2services.syncfusion.com/production/web-services/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 its groundbreaking feature representations. You can also explore our Angular Scheduler example to knows how to present and manipulate data.