ScheduleComponent

1 Oct 202524 minutes to read

ej-schedule represents the Angular Schedule Component.

<ejs-schedule></ejs-schedule>

Properties

agendaDaysCount number

Sets the number of days to be displayed by default in Agenda View and in case of virtual scrolling,
the number of days will be fetched on each scroll-end based on this count.

<ejs-schedule agendaDaysCount=2></ejs-schedule>

Defaults to 7

allowClipboard boolean

Enables clipboard functionality for appointments, allowing them to be copied using keyboard shortcuts and pasted onto the Scheduler.
When set to true, users can use keyboard shortcuts to cut, copy appointments and paste them into different time slots or calendars.

Defaults to false

allowDragAndDrop boolean

When set to true, allows the appointments to move over the time slots. When an appointment is dragged, both its start
and end time tends to change simultaneously allowing it to reschedule the appointment on some other time.

Defaults to true

allowInline boolean

This property helps user to add/edit the event in inline. By default, it is set to false.

Defaults to false

allowKeyboardInteraction boolean

When set to true, allows the keyboard interaction to take place on Schedule.

Defaults to true

allowMultiCellSelection boolean

This property helps user to allow/prevent the selection of multiple cells. By default, it is set to true.

Defaults to true

allowMultiDrag boolean

This property helps to drag the multiple selected events. By default, it is set to false.

Defaults to false

allowMultiRowSelection boolean

This property helps user to allow/prevent the selection of multiple days(rows). By default, it is set to true.

Defaults to true

allowOverlap boolean

Specifies whether overlapping appointments are allowed within the same time slot in the Scheduler.

Defaults to true

allowResizing boolean

When set to true, allows the resizing of appointments. It allows the rescheduling of appointments either by changing the
start or end time by dragging the event resize handlers.

Defaults to true

allowSwiping boolean

Defines whether to enable date navigations via swipe in touch devices or not.

Defaults to true

calendarMode CalendarType

It allows the Scheduler to display in other calendar modes.
By default, Scheduler is displayed in Gregorian calendar mode.

<ejs-schedule calendarMode='Islamic'></ejs-schedule>

To change the mode, you can set either Gregorian or Islamic as a value to this calendarMode property.

Defaults to ‘Gregorian’

cellHeaderTemplate string|object

It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto
the month date cells. This template is only applicable for month view day cells.

<ejs-schedule currentView='Month'>
<ng-template #cellHeaderTemplate let-data>
  <div class="date-text">{{getDateHeaderText(data.date)}}</div>
</ng-template>
</ejs-schedule>

import { Component, ViewEncapsulation } from "@angular/core";
import { Internationalization } from '@syncfusion/ej2-base';

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.css"],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  public instance: Internationalization = new Internationalization();
  getDateHeaderText: Function = (value: Date) => {
    return this.instance.formatDate(value, { skeleton: "Ed" });
  };
}

Defaults to null

cellTemplate string|object

The template option which is used to render the customized work cells on the Schedule. Here, the template accepts either
the string or HTMLElement as template design and then the parsed design is displayed onto the work cells.
The fields accessible via template are as follows.

date: Returns the date of the cell.
groupIndex: Returns the group index of the cell.
type: Returns the type of the work cell.
Refer to the below code snippet.

<ejs-schedule>
<ng-template #cellTemplate let-data>
    <div class="templatewrap" *ngIf="data.type == 'workCells'" [innerHTML]="getWorkCellText(data.date)"></div>
    <div class="templatewrap" *ngIf="data.type == 'monthCells'" [innerHTML]="getMonthCellText(data.date)"></div>
  </ng-template>
</ejs-schedule>

import { Component, ViewEncapsulation } from '@angular/core';
import { Internationalization } from '@syncfusion/ej2-base';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  public instance: Internationalization = new Internationalization();
  getMonthCellText(date: Date): string {
    if (date.getMonth() === 10 && date.getDate() === 23) {
      return '<img src= "https://ej2.syncfusion.com/demos/src/schedule/images/birthday.svg" style="height:90%; width:90%"/>';
    } else if (date.getMonth() === 11 && date.getDate() === 9) {
      return '<img src= "https://ej2.syncfusion.com/demos/src/schedule/images/get-together.svg" style="height:90%; width:90%"/>';
    } else if (date.getMonth() === 11 && date.getDate() === 13) {
      return '<img src= "https://ej2.syncfusion.com/demos/src/schedule/images/birthday.svg" style="height:90%; width:90%"/>';
    }
    return '';
  }
  getWorkCellText(date: Date): string {
    let weekEnds: number[] = [0, 6];
    if (weekEnds.indexOf(date.getDay()) >= 0) {
      return "<img src='https://ej2.syncfusion.com/demos/src/schedule/images/newyear.svg' style='height:90%; width:90%'/>";
    }
    return '';
  }
}

Defaults to null

cssClass string

It is used to customize the Schedule which accepts custom CSS class names that defines specific user-defined styles and themes
to be applied on the Schedule element.

<ejs-schedule #scheduleObj cssClass='cell-dimension'></ejs-schedule>

import { Component, ViewEncapsulation } from "@angular/core";
/**
 * Default Button Controller
 */
@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styles: [`.cell-dimension.e-schedule .e-vertical-view .e-date-header-wrap table col,
            .cell-dimension.e-schedule .e-vertical-view .e-content-wrap table col {
                width: 200px;}`
          ],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  constructor() {}
}

Defaults to null

currentView View

To set the active view on scheduler, the currentView property can be used and it usually accepts either of the following available
view options. The view option specified in this property will be initially loaded on the schedule.

Day: Denotes Day view of the scheduler.
Week: Denotes Week view of the scheduler.
WorkWeek: Denotes Work Week view of the scheduler.
Month: Denotes Month view of the scheduler.
Year: Denotes Year view of the scheduler.
Agenda: Denotes Agenda view of the scheduler.
MonthAgenda: Denotes Month Agenda view of the scheduler.
TimelineDay: Denotes Timeline Day view of the scheduler.
TimelineWeek: Denotes Timeline Week view of the scheduler.
TimelineWorkWeek: Denotes Timeline Work Week view of the scheduler.
TimelineMonth: Denotes Timeline Month view of the scheduler.
TimelineYear: Denotes Timeline Year view of the scheduler.

<ejs-schedule #scheduleObj currentView='Month'></ejs-schedule>

Defaults to ‘Week’

dateFormat string

By default, Schedule follows the date-format as per the default culture assigned to it.
It is also possible to manually set specific date format by using the dateFormat property.

<ejs-schedule dateFormat='dd-MMM-yyyy'></ejs-schedule>

The format of the date range label in the header bar depends on the dateFormat value or else based on the
locale assigned to the Schedule.

Defaults to null

dateHeaderTemplate string|object

It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto
the date header cells. The field that can be accessed via this template is date.

<ejs-schedule>
	<ng-template #dateHeaderTemplate let-data>
		<div class="date-text">{{getDateHeaderText(data.date)}}</div>
	</ng-template>
</ejs-schedule>

import { Component, ViewEncapsulation } from "@angular/core";
import { Internationalization } from '@syncfusion/ej2-base';

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.css"],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  public instance: Internationalization = new Internationalization();
  getDateHeaderText: Function = (value: Date) => {
    return this.instance.formatDate(value, { skeleton: "Ed" });
  };
}

Defaults to null

dateRangeTemplate string|object

It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the header date range.

Defaults to null

dayHeaderTemplate string|object

It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto
the day header cells. This template is only applicable for year view header cells.

Defaults to null

editorFooterTemplate string|object

The template option to render the customized footer of the editor window.

Defaults to null

editorHeaderTemplate string|object

The template option to render the customized header of the editor window.

Defaults to null

editorTemplate string|object

The template option to render the customized editor window. The form elements defined within this template should be accompanied
with e-field class, so as to fetch and process it from internally.

<ejs-schedule (popupOpen)='onPopupOpen($event)'>
	<ng-template #editorTemplate>
		<table class="custom-event-editor" width="100%" cellpadding="5">
			<tbody>
				<tr>
					<td class="e-textlabel">Summary</td>
					<td colspan="4">
						<input id="Subject" class="e-field e-input" type="text" value="" name="Subject" style="width: 100%" />
                    </td>
				</tr>
				<tr>
					<td class="e-textlabel">Status</td>
					<td colspan="4">
						<input type="text" id="EventType" name="EventType" class="e-field" style="width: 100%" />
                    </td>
				</tr>
				<tr>
					<td class="e-textlabel">From</td>
					<td colspan="4">
						<input id="StartTime" class="e-field" type="text" name="StartTime" />
                    </td>
				</tr>
				<tr>
					<td class="e-textlabel">To</td>
					<td colspan="4">
						<input id="EndTime" class="e-field" type="text" name="EndTime" />
                    </td>
				</tr>
				<tr>
					<td class="e-textlabel">Reason</td>
					<td colspan="4">
						<textarea id="Description" class="e-field e-input" name="Description" rows="3" cols="50" style="width: 100%; height: 60px !important; resize: vertical"></textarea>
					</td>
				</tr>
			</tbody>
		</table>
	</ng-template>
</ejs-schedule>

import { Component, ViewEncapsulation } from "@angular/core";
import { PopupOpenEventArgs } from '@syncfusion/ej2-angular-schedule';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { DateTimePicker } from '@syncfusion/ej2-calendars';

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.css"],
  encapsulation: ViewEncapsulation.None
})

export class AppComponent {
  onPopupOpen(args: PopupOpenEventArgs): void {
    if (args.type === "Editor") {
      let statusElement: HTMLInputElement = args.element.querySelector(
        "#EventType"
      ) as HTMLInputElement;
      if (!statusElement.classList.contains("e-dropdownlist")) {
        let dropDownListObject: DropDownList = new DropDownList({
          placeholder: "Choose status",
          value: statusElement.value,
          dataSource: ["New", "Requested", "Confirmed"]
        });
        dropDownListObject.appendTo(statusElement);
        statusElement.setAttribute("name", "EventType");
      }
      let startElement: HTMLInputElement = args.element.querySelector(
        "#StartTime"
      ) as HTMLInputElement;
      if (!startElement.classList.contains("e-datetimepicker")) {
        new DateTimePicker(
          { value: new Date(startElement.value) || new Date() },
          startElement
        );
      }
      let endElement: HTMLInputElement = args.element.querySelector(
        "#EndTime"
      ) as HTMLInputElement;
      if (!endElement.classList.contains("e-datetimepicker")) {
        new DateTimePicker(
          { value: new Date(endElement.value) || new Date() },
          endElement
        );
      }
    }
  }
}

Defaults to null

enableAdaptiveUI boolean

When set to true, the header view navigations are listed under the popup and if we enable resource grouping, the compact view will be enabled.

Defaults to false

enableAllDayScroll boolean

When set to true, If valid, the scroll on the all day row is activated when the all day row
height reaches the max height when the all day row is expanded.

Defaults to false

enableHtmlSanitizer boolean

Specifies whether to enable the rendering of untrusted HTML values in the Schedule component.
When this property is enabled, the component will sanitize any suspected untrusted strings and scripts before rendering them.

Defaults to true

enablePersistence boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRecurrenceValidation boolean

The recurrence validation will be done by default. When this property is set to false, the recurrence validation will be skipped.

Defaults to true

enableRtl boolean

Enable or disable rendering component in right to left direction.

Defaults to false

endHour string

It is used to specify the end hour, at which the Schedule ends. It too accepts the time string in a short skeleton format.

<ejs-schedule endHour='18:00'></ejs-schedule>

Defaults to ‘24:00’

eventDragArea string

It enables the external drag and drop support for appointments on scheduler, to be able to move them out of the scheduler layout.
When the drag area is explicitly set with specific DOM element name, the appointments can be dragged anywhere within the specified drag area location.

<ejs-schedule eventDragArea='body'></ejs-schedule>

Defaults to null

eventSettings EventSettingsModel

Complete set of settings related to Schedule events to bind it to local or remote dataSource, map applicable database fields and
other validation to be carried out on the available fields.

<ejs-schedule [eventSettings]="eventSettings"></ejs-schedule>

import { Component, ViewEncapsulation } from "@angular/core";
import { EventSettingsModel } from '@syncfusion/ej2-angular-schedule';

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.css"],
  encapsulation: ViewEncapsulation.None
})

export class AppComponent {
  public eventSettings: EventSettingsModel = {
    dataSource: [
      {
        Id: 1,
        Subject: "Event-1",
        StartTime: new Date(2017, 9, 16, 23),
        EndTime: new Date(2017, 9, 17, 10),
        IsAllDay: false
      }
    ]
  };
}

Defaults to null

firstDayOfWeek number

This option allows the user to set the first day of a week on Schedule. It should be based on the locale set to it and each culture
defines its own first day of week values. If needed, the user can set it manually on his own by defining the value through
this property. It usually accepts the integer values, whereby 0 is always denoted as Sunday, 1 as Monday and so on.

<ejs-schedule [firstDayOfWeek]=2></ejs-schedule>

Defaults to 0

firstMonthOfYear number

This property helps render the year view customized months. By default, it is set to 0.

<ejs-schedule [firstMonthOfYear]=2>
    <e-views>
        <e-view option="Year"></e-view>
        <e-view option="TimelineYear"></e-view>
    </e-views>
</ejs-schedule>

Defaults to 0

group GroupModel

Allows defining the group related settings of multiple resources. When this property is non-empty, it means
that the resources will be grouped on the schedule layout based on the provided resource names.

<ejs-schedule [group]="group">
	<e-resources>
		<e-resource field='AirlineId' title='Airline Name' name='Airlines' [allowMultiple]='allowMultiple'
			[dataSource]='resourceDataSource' textField='AirlineName' idField='AirlineId' colorField='AirlineColor'>
		</e-resource>
	</e-resources>
</ejs-schedule>

import { Component, ViewEncapsulation } from "@angular/core";
import { GroupModel } from "@syncfusion/ej2-angular-schedule";

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.css"],
  encapsulation: ViewEncapsulation.None
})

export class AppComponent {
  public resourceDataSource: Object[] = [
    { AirlineName: "Airways 1", AirlineId: 1, AirlineColor: "#EA7A57" },
    { AirlineName: "Airways 2", AirlineId: 2, AirlineColor: "#357cd2" },
    { AirlineName: "Airways 3", AirlineId: 3, AirlineColor: "#7fa900" }
  ];
  public group: GroupModel = { resources: ["Airlines"] };
}

Defaults to {}

headerIndentTemplate string|object

Template option to customize the header indent bar. Here, the template accepts either
the string or HTMLElement as template design and then the parsed design is displayed onto the header indent cell.
Refer to the below code snippet.

<ejs-schedule>
  <e-views>
    <e-view option="Day"></e-view>
    <e-view option="Week"></e-view>
    <e-view option="WorkWeek"></e-view>
  </e-views>
  <ng-template #headerIndentTemplate let-data >
    <div class="template-wrap" *ngIf="data.className[0] == 'e-header-cells'">
      Template
    </div>
  </ng-template>
</ejs-schedule>

import { Component, ViewEncapsulation } from "@angular/core";
import { DayService, WeekService, WorkWeekService, ResizeService, DragAndDropService
} from '@syncfusion/ej2-angular-schedule';

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.css"],
  providers: [DayService, WeekService, WorkWeekService, ResizeService, DragAndDropService],
  encapsulation: ViewEncapsulation.None
})

export class AppComponent {
}

Defaults to null

headerRows HeaderRowsModel[]

Allows defining the collection of custom header rows to display the year, month, week, date and hour label as an individual row
on the timeline view of the scheduler.

<ejs-schedule>
	<e-header-rows>
		<e-header-row option='Year'></e-header-row>
		<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-row option='Hour'></e-header-row>
	</e-header-rows>
	<e-views>
		<e-view option='TimelineWeek'></e-view>
	</e-views>
</ejs-schedule>

Defaults to []

height string|number

Sets the height of the Schedule component, accepting both string and number values.

<ejs-schedule height='550px'></ejs-schedule>

The string type includes either pixel or percentage values.
When height is set with specific pixel value, then the Schedule will be rendered to that specified space.
In case, if auto value is set, then the height of the Schedule gets auto-adjusted within the given container.

Defaults to ‘auto’

hideEmptyAgendaDays boolean

The days which does not has even a single event to display will be hidden from the UI of Agenda View by default.
When this property is set to false, the empty dates will also be displayed on the Schedule.

Defaults to true

locale string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ’’

maxDate Date

To define the maximum date on the Schedule, maxDate property can be defined.
Usually, it defaults to the new Date(2099, 11, 31).

<ejs-schedule height='650px' [maxDate]='maxDate'> </ejs-schedule>

import { Component } from '@angular/core';
import { DayService, WeekService, WorkWeekService, MonthService, AgendaService, ResizeService, DragAndDropService } from '@syncfusion/ej2-angular-schedule';

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    providers: [DayService, WeekService, WorkWeekService, MonthService, AgendaService, ResizeService, DragAndDropService]
})
export class AppComponent {
    public maxDate: Date = new Date(2021, 1, 1);
}

Defaults to new Date(2099, 11, 31)

minDate Date

To define the minimum date on the Schedule, minDate property can be defined.
Usually, it defaults to the new Date(1900, 0, 1).

 <ejs-schedule height='650px' [minDate]='minDate'></ejs-schedule>

import { Component } from '@angular/core';
import { DayService, WeekService, WorkWeekService, MonthService, AgendaService, ResizeService, DragAndDropService } from '@syncfusion/ej2-angular-schedule';

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    providers: [DayService, WeekService, WorkWeekService, MonthService, AgendaService, ResizeService, DragAndDropService]
})
export class AppComponent {
    public minDate: Date = new Date(2020, 6, 1);
}

Defaults to new Date(1900, 0, 1)

monthHeaderTemplate string|object

It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto
the month header cells. This template is only applicable for year view header cells.

Defaults to null

monthsCount number

This option allows the user to set the number of months count to be displayed on the Schedule.

<ejs-schedule [monthsCount]="16">
  <e-views>
    <e-view option="TimelineYear"></e-view>
    <e-view option="Year"></e-view>
  </e-views>
</ejs-schedule>

import { Component } from '@angular/core';
import { YearService, TimelineYearService, DragAndDropService } from '@syncfusion/ej2-angular-schedule';

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    providers: [YearService,TimelineYearService, DragAndDropService]
})
export class AppComponent {
}

Defaults to 12

overscanCount number

Specifies the number of additional rows or columns to render outside the visible area during virtual scrolling.
This property helps in achieving smoother scrolling by pre-loading data just outside the visible region.

Defaults to 3

quickInfoOnSelectionEnd boolean

This property helps to show quick popup after multiple cell selection. By default, it is set to false.

Defaults to false

quickInfoTemplates QuickInfoTemplatesModel

The template option to customize the quick window. The three sections of the quick popup whereas the header, content,
and footer can be easily customized with individual template option.

<ejs-schedule #scheduleObj (popupOpen)="onPopupOpen($event)">
	<ng-template #quickInfoTemplatesHeader let-data>
		<div *ngIf="data.elementType == 'cell' || data.elementType == 'event'">
			<div class="e-popup-header">
				<div class="e-header-icon-wrapper">
					<div *ngIf="data.elementType == 'event'" class="subject">{{data.Subject}}</div>
					<button class="e-close e-close-icon e-icons" title="Close" (click)="onCloseClick($event)"></button>
				</div>
			</div>
		</div>
	</ng-template>
	<ng-template #quickInfoTemplatesContent let-data>
		<div *ngIf="data.elementType == 'cell'" class="e-cell-content">
			<form class="e-schedule-form">
				<div style="padding:10px">
					<input class="subject e-field e-input" type="text" name="Subject" placeholder="Title" style="width:100%">
          </div>
					<div style="padding:10px">
						<input class="location e-field e-input" type="text" name="Location" placeholder="Location" style="width:100%">
          </div>
			</form>
		</div>
		<div *ngIf="data.elementType == 'event'" class="e-event-content">
			<div class="start-time">Start: {{data.StartTime.toLocaleString()}}</div>
			<div class="end-time">End: {{data.EndTime.toLocaleString()}}</div>
			<div *ngIf="data.Location != undefined && data.Location != ''" class="location">Location: {{data.Location}}
			</div>
		</div>
	</ng-template>
	<ng-template #quickInfoTemplatesFooter let-data>
		<div *ngIf="data.elementType == 'cell'" class="e-cell-footer">
			<div class="left-button">
				<button class="e-event-details" title="Extra Details" (click)="onDetailsClick($event)">More Details</button>
			</div>
			<div class="right-button">
				<button class="e-event-create" title="Add" (click)="onAddClick($event)">Add</button>
			</div>
		</div>
		<div *ngIf="data.elementType == 'event'" class="e-event-footer">
			<div class="left-button">
				<button class="e-delete" title="Delete" (click)="onDeleteClick($event)">Delete</button>
				<button *ngIf="data.RecurrenceRule != undefined && data.RecurrenceRule != ''" class="e-delete-series"
            title="Delete" (click)="onDeleteClick($event)">Delete Series</button>
			</div>
			<div class="right-button">
				<button class="e-edit" title="Edit" (click)="onEditClick($event)">Edit</button>
				<button *ngIf="data.RecurrenceRule != undefined && data.RecurrenceRule != ''" class="e-edit-series"
            title="Edit" (click)="onEditClick($event)">Edit Series</button>
			</div>
		</div>
	</ng-template>
</ejs-schedule>

import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { isNullOrUndefined } from "@syncfusion/ej2-base";
import { PopupOpenEventArgs, ScheduleComponent, CurrentAction } from "@syncfusion/ej2-angular-schedule";

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.css"],
  encapsulation: ViewEncapsulation.None
})

export class AppComponent {
  @ViewChild("scheduleObj")
  public scheduleObj: ScheduleComponent;
  private selectionTarget: Element;
  public onPopupOpen(args: PopupOpenEventArgs): void {
    this.selectionTarget = null;
    this.selectionTarget = args.target;
  }
  public onDetailsClick(): void {
    this.onCloseClick();
    const data: Object = this.scheduleObj.getCellDetails(
      this.scheduleObj.getSelectedElements()
    ) as Object;
    this.scheduleObj.openEditor(data, "Add");
  }
  public onAddClick(): void {
    this.onCloseClick();
    const data: Object = this.scheduleObj.getCellDetails(
      this.scheduleObj.getSelectedElements()
    ) as Object;
    const eventData: {
      [key: string]: Object;
    } = this.scheduleObj.eventWindow.getObjectFromFormData(
      "e-quick-popup-wrapper"
    );
    this.scheduleObj.eventWindow.convertToEventData(
      data as { [key: string]: Object },
      eventData
    );
    eventData.Id = (this.scheduleObj.eventBase.getEventMaxID() as number) + 1;
    this.scheduleObj.addEvent(eventData);
  }
  public onEditClick(args: any): void {
    if (this.selectionTarget) {
      let eventData: {
        [key: string]: Object;
      } = this.scheduleObj.getEventDetails(this.selectionTarget) as {
        [key: string]: Object;
      };
      let currentAction: CurrentAction = "Save";
      if (
        !isNullOrUndefined(eventData.RecurrenceRule) &&
        eventData.RecurrenceRule !== ""
      ) {
        if (args.target.classList.contains("e-edit-series")) {
          currentAction = "EditSeries";
          eventData = (this.scheduleObj.eventBase as any).getRecurrenceEvent(eventData);
        } else {
          currentAction = "EditOccurrence";
        }
      }
      this.scheduleObj.openEditor(eventData, currentAction);
    }
  }
  public onDeleteClick(args: any): void {
    this.onCloseClick();
    if (this.selectionTarget) {
      const eventData: {
        [key: string]: Object;
      } = this.scheduleObj.getEventDetails(this.selectionTarget) as {
        [key: string]: Object;
      };
      let currentAction: CurrentAction;
      if (
        !isNullOrUndefined(eventData.RecurrenceRule) &&
        eventData.RecurrenceRule !== ""
      ) {
        currentAction = args.target.classList.contains("e-delete-series")
          ? "DeleteSeries"
          : "DeleteOccurrence";
      }
      this.scheduleObj.deleteEvent(eventData, currentAction);
    }
  }
  public onCloseClick(): void {
    this.scheduleObj.quickPopup.quickPopupHide();
  }
}

Defaults to null

readonly boolean

When set to true, makes the Schedule to render in a read only mode. No CRUD actions will be allowed at this time.

Defaults to false

resourceHeaderTemplate string|object

Template option to customize the resource header bar. Here, the template accepts either
the string or HTMLElement as template design and then the parsed design is displayed onto the resource header cells.
The following can be accessible via template.

resource - All the resource fields.
resourceData - Object collection of current resource.
Refer to the below code snippet.

<ejs-schedule [group]='group'>
	<e-resources>
		<e-resource field="DoctorId" title="Doctor Name" name="Doctors" [dataSource]="doctorDataSource" textField='text' idField='id' colorField='color' designationField='designation'>
		</e-resource>
	</e-resources>
	<ng-template #resourceHeaderTemplate let-data>
		<div class='template-wrap'>
			<div class="resource-details">
				<div class="resource-name">{{data.resourceData.text}}</div>
				<div class="resource-designation">{{data.resourceData.designation}}</div>
			</div>
		</div>
	</ng-template>
</ejs-schedule>

import { Component, ViewEncapsulation } from "@angular/core";
import { GroupModel } from "@syncfusion/ej2-angular-schedule";

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.css"],
  encapsulation: ViewEncapsulation.None
})

export class AppComponent {
  public group: GroupModel = {
    resources: ["Doctors"]
  };
  public allowMultipleDoctors: Boolean = true;
  public doctorDataSource: Object[] = [
    { text: "Will Smith", id: 1, color: "#ea7a57", designation: "Cardioligst" },
    { text: "Alice", id: 2, color: "#7fa900", designation: "Neurologist" }
  ];
}

Defaults to null

resources ResourcesModel[]

Allows defining the collection of resources to be displayed on the Schedule. The resource collection needs to be defined
with unique resource names to identify it along with the respective dataSource and field mapping options.

<ejs-schedule [group]="group">
	<e-resources>
		<e-resource field='AirlineId' title='Airline Name' name='Airlines' [allowMultiple]='allowMultiple'
			[dataSource]='resourceDataSource' textField='AirlineName' idField='AirlineId' colorField='AirlineColor'>
		</e-resource>
	</e-resources>
</ejs-schedule>

import { Component, ViewEncapsulation } from "@angular/core";
import { GroupModel } from "@syncfusion/ej2-angular-schedule";

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.css"],
  encapsulation: ViewEncapsulation.None
})

export class AppComponent {
  public resourceDataSource: Object[] = [
    { AirlineName: "Airways 1", AirlineId: 1, AirlineColor: "#EA7A57" },
    { AirlineName: "Airways 2", AirlineId: 2, AirlineColor: "#357cd2" },
    { AirlineName: "Airways 3", AirlineId: 3, AirlineColor: "#7fa900" }
  ];
  public group: GroupModel = { resources: ["Airlines"] };
}

Defaults to []

rowAutoHeight boolean

when set to true, allows the height of the work-cells to adjust automatically
based on the number of appointments present in those time ranges.

Defaults to false

selectedDate Date

To mark the active (current) date on the Schedule, selectedDate property can be defined.
Usually, it defaults to the current System date.

<ejs-schedule [selectedDate]="selectedDate"></ejs-schedule>

import { Component, ViewEncapsulation } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.css"],
  encapsulation: ViewEncapsulation.None
})

export class AppComponent {
  public selectedDate: Date = new Date(2023, 5, 5);
}

Defaults to ‘new Date()’

showHeaderBar boolean

When set to false, hides the header bar of the Schedule from UI. By default,
the header bar holds the date and view navigation options, to which the user can add their own custom items onto it.

Defaults to true

showQuickInfo boolean

When set to true, displays a quick popup with cell or event details on single clicking over the cells or on events.
By default, it is set to true.

Defaults to true

showTimeIndicator boolean

When set to false, hides the current time indicator from the Schedule. Otherwise,
it visually depicts the live current system time appropriately on the user interface.

Defaults to true

showWeekNumber boolean

When set to true, displays the week number of the current view date range. By default, it is set to false.

Defaults to false

showWeekend boolean

When set to false, it hides the weekend days of a week from the Schedule. The days which are not defined in the working days
collection are usually treated as weekend days.
Note: By default, this option is not applicable on Work Week view.
For example, if the working days are defined as [1, 2, 3, 4], then the remaining days of that week will be considered as
the weekend days and will be hidden on all the views.

Defaults to true

startHour string

It is used to specify the starting hour, from which the Schedule starts to display. It accepts the time string in a short skeleton
format and also, hides the time beyond the specified start time.

<ejs-schedule startHour='10:00'></ejs-schedule>

Defaults to ‘00:00’

timeFormat string

By default, Schedule follows the time-format as per the default culture assigned to it.
It is also possible to manually set specific time format by using the timeFormat property.

Defaults to null

timeScale TimeScaleModel

Allows to set different time duration on Schedule along with the customized grid count. It also has template option to
customize the time slots with required time values in its own format.

<ejs-schedule [timeScale]="timeScale"></ejs-schedule>

import { Component, ViewEncapsulation } from "@angular/core";
import { TimeScaleModel } from '@syncfusion/ej2-angular-schedule';

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.css"],
  encapsulation: ViewEncapsulation.None
})

export class AppComponent {  
    public timeScale: TimeScaleModel = { enable: true, interval: 60, slotCount: 6 };
}

Defaults to { enable: true, interval: 60, slotCount: 2, majorSlotTemplate: null, minorSlotTemplate: null }

timezone string

Schedule will be assigned with specific timezone, so as to display the events in it accordingly. By default,
Schedule dates are processed with System timezone, as no timezone will be assigned specifically to the Schedule at the initial time.
Whenever the Schedule is bound to remote data services, it is always recommended to set specific timezone to Schedule to make the
events on it to display on the same time irrespective of the system timezone. It usually accepts
the valid IANA timezone names.

<ejs-schedule timezone="UTC"></ejs-schedule>

Defaults to null

timezoneDataSource TimezoneFields[]

Allows to define the collection of timezone items in the Schedule. Only the items bound to this property get listed out in the timezone dropdown of the appointment window.

<ejs-schedule [timezoneDataSource]=timezoneDataSource></ejs-schedule>

import { Component, ViewEncapsulation } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.css"],
  encapsulation: ViewEncapsulation.None
})

export class AppComponent {
  public timezoneDataSource : [
                    { Value: 'Pacific/Niue', Text: 'Niue' },
                    { Value: 'Pacific/Pago_Pago', Text: 'Pago Pago' },
                    { Value: 'Pacific/Honolulu', Text: 'Hawaii Time' },
                    { Value: 'Pacific/Rarotonga', Text: 'Rarotonga' },
                    { Value: 'Pacific/Tahiti', Text: 'Tahiti' }
                ]
}

Defaults to timezoneData

toolbarItems ToolbarItemModel[]

To render the custom toolbar items, the toolbarItems property can be used. It contains built-in and custom toolbar items.
To avail the built-in toolbar items, the below string values are assigned to the name property of the ToolbarItemModel.

Previous: Schedule component navigates to the previous date from the current date.
Next: Schedule component navigates to the next date from the current date.
Today: Schedule component navigates to the current date from any date.
Views: Schedule component render the defined view options in the toolbar. If view option is not defined, then it will render default view options in the Schedule.
DateRangeText: Schedule component displays the current date text range.
NewEvent: Schedule component render the icon to add a new event.

Defaults to []

views View[]|ViewsModel[]

This property holds the views collection and its configurations. It accepts either the array of view names or the array of view
objects that holds different configurations for each views. By default,
Schedule displays all the views namely Day, Week, Work Week, Month and Agenda.
Example for array of views:

Example for array of view objects:

Defaults to ’[“Day”, “Week”, “WorkWeek”, “Month”, “Agenda”]’

weekRule WeekRule

It allows the Scheduler to display week numbers based on following available week options. The week
option specified in this property will be initially loaded on the schedule.

FirstDay: Denotes that the first week of the year starts on the first day of the year and ends before the following designated first day of the week.
FirstFourDayWeek:Denotes that the first week of the year is the first week with four or more days before the designated first day of the week.
FirstFullWeek: Denotes that the first week of the year begins on the first occurrence of the designated first day of the week on or after the first day of the year.

<ejs-schedule [showWeekNumber]=true weekRule='FirstFourDayWeek'></ejs-schedule>

Defaults to ‘FirstDay’

width string|number

Sets the width of the Schedule component, accepting both string and number values.

<ejs-schedule width='100%'></ejs-schedule>

The string value can be either pixel or percentage format.
When set to auto, the Schedule width gets auto-adjusted and display its content related to the viewable screen size.

Defaults to ‘auto’

workDays number[]

It is used to set the working days on Schedule. The only days that are defined in this collection will be rendered on the workWeek
view whereas on other views, it will display all the usual days and simply highlights the working days with different shade.

<ejs-schedule [workDays]='workWeekDays'></ejs-schedule>

import { Component, ViewEncapsulation } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.css"],
  encapsulation: ViewEncapsulation.None
})

export class AppComponent {  
    public workWeekDays: number[] = [1, 3, 5];
}

Defaults to ‘[1, 2, 3, 4, 5]’

workHours WorkHoursModel

The working hours should be highlighted on Schedule with different color shade and an additional option must be provided to
highlight it or not. This functionality is handled through workHours property and the start work hour should be 9 AM by default
and end work hour should point to 6 PM. The start and end working hours needs to be provided as Time value of short skeleton type.

<ejs-schedule [workHours]="scheduleHours"></ejs-schedule>

import { Component, ViewEncapsulation } from "@angular/core";
import { WorkHoursModel } from '@syncfusion/ej2-angular-schedule';

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.css"],
  encapsulation: ViewEncapsulation.None
})

export class AppComponent {  
    public scheduleHours: WorkHoursModel  = { highlight: true, start: '11:00', end: '20:00' };
}

Defaults to { highlight: true, start: ‘09:00’, end: ‘18:00’ }

Methods

addEvent

Adds the newly created event into the Schedule dataSource.

Parameter	Type	Description
data	`Record` \| `Record[]`	Single or collection of event objects to be added into Schedule.

Returns void

addResource

Adds the resources to the specified index.

Parameter	Type	Description
resources	`Record` \| `Record[]`	Accepts the resource data in single or collection of data.
name	`string`	Name of the resource defined in resources collection.
index	`number`	Index or position where the resource should be added.

Returns void

changeCurrentView

Current View could be change based on the provided parameters.

Parameter	Type	Description
viewName	`View`	Accept the view in the viewCollections.
viewIndex (optional)	`number`	Accept the viewIndex in the viewCollections.

Returns void

closeEditor

To manually close the event editor window

Returns void

closeOverlapAlert

To manually close the overlap validation Alert.

Returns void

closeQuickInfoPopup

To manually close the quick info popup

Returns void

closeTooltip

Closes the tooltip.
For example, when the context menu is opened for an event,
the tooltip can be closed by calling this method.

Returns void

collapseResource

This method allows to collapse the resource that available on the scheduler.

Parameter	Type	Description
resourceId	`string` \| `number`	Accepts the resource id in either string or number type
name	`string`	Accepts the name of the resource collection

Returns void

copy

Method to copy events from an HTMLElement or an array of HTMLElements.

Parameter	Type	Description
elements	`HTMLElement[]`	Accepts an array of HTMLElement

Returns void

cut

Method to cut events from an HTMLElement or an array of HTMLElements.

Parameter	Type	Description
elements	`HTMLElement[]`	Accepts an array of HTMLElement

Returns void

deleteEvent

Deletes the events based on the provided ID or event collection in the argument list.

Parameter	Type	Description
id	`string` \| `number` \| `Record` \| `Record[]`	Accepts the ID as string or number type or single or collection of the event object which needs to be removed from the Schedule.
currentAction (optional)	`CurrentAction`	Denotes the delete action that takes place either on occurrence or series events. The valid current action names are `Delete`, `DeleteOccurrence` or `DeleteSeries`.

Returns void

destroy

Destroys the Schedule component.

Returns void

expandResource

This method allows to expand the resource that available on the scheduler.

Parameter	Type	Description
resourceId	`string` \| `number`	Accepts the resource id in either string or number type
name	`string`	Accepts the name of the resource collection

Returns void

exportToExcel

Allows the Scheduler events data to be exported as an Excel file either in .xlsx or .csv file formats.
By default, the whole event collection bound to the Scheduler gets exported as an Excel file.
To export only the specific events of Scheduler, you need to pass the custom data collection as
a parameter to this exportToExcel method. This method accepts the export options as arguments such as fileName,
exportType, fields, customData, and includeOccurrences. The fileName denotes the name to be given for the exported
file and the exportType allows you to set the format of an Excel file to be exported either as .xlsx or .csv.
The custom or specific field collection of event dataSource to be exported can be provided through fields option
and the custom data collection can be exported by passing them through the customData option. There also exists
option to export each individual instances of the recurring events to an Excel file, by setting true or false to the
includeOccurrences option, denoting either to include or exclude the occurrences as separate instances on an exported Excel file.

Parameter	Type	Description
excelExportOptions (optional)	`ExportOptions`	The export options to be set before start with exporting the Scheduler events to an Excel file.

Returns void

exportToICalendar

Exports the Scheduler events to a calendar (.ics) file. By default, the calendar is exported with a file name Calendar.ics.
To change this file name on export, pass the custom string value as fileName to get the file downloaded with this provided name.

Parameter	Type	Description
fileName (optional)	`string`	Accepts the string value.
customData (optional)	`Record[]`	Accepts the collection of objects.

Returns void

generateEventOccurrences

Generates the occurrences of a single recurrence event based on the provided event.

Parameter	Type	Description
event	`Record`	Accepts the parent recurrence event from which the occurrences are generated.
startDate (optional)	`Date`	Accepts the start date for the event occurrences. If not provided, the event’s start date will be used.

Returns Record[]

getBlockEvents

Retrieves the entire collection of block events bound to the Schedule.

Parameter	Type	Description
startDate (optional)	`Date`	Accepts the start date.
endDate (optional)	`Date`	Accepts te end date.
includeOccurrences (optional)	`boolean`	Accepts the boolean value to process the occurrence from recurrence series.

Returns Record[]

getCellDetails

Retrieves the start and end time information of the specific cell element.

Parameter	Type	Description
tdCol	`Element` \| `Element[]`	Accepts the single or collection of elements.

Returns CellClickEventArgs

getCurrentViewDates

Retrieves the dates that lies on active view of Schedule.

Returns Date[]

getCurrentViewEvents

Retrieves the events that lies on the current date range of the active view of Schedule.

Returns Record[]

getCurrentViewIndex

Return the current view Index.

Returns number

getDateRangeText

Retrieves a formatted string representing the date range of the given date collection.

Parameter	Type	Description
dates	`Date[]`	An array of Date objects representing the date range.

Returns string

getDeletedOccurrences

Get deleted occurrences from given recurrence series.

Parameter	Type	Description
recurrenceData	`string` \| `number` \| `Record`	Accepts the parent ID of the event object or parent event object

Returns Record[]

getEventDetails

To retrieve the appointment object from element.

Parameter	Type	Description
element	`Element`	Denotes the event UI element on the Schedule.

Returns Record

getEventMaxID

Get the maximum id of an event.

Returns number | string

getEvents

Retrieves the entire collection of events bound to the Schedule.

Parameter	Type	Description
startDate (optional)	`Date`	Accepts the start date.
endDate (optional)	`Date`	Accepts te end date.
includeOccurrences (optional)	`boolean`	Accepts the boolean value to process the occurrence from recurrence series.

Returns Record[]

getIndexFromResourceId

Select the resources to the based on id.

Parameter	Type	Description
id	`string` \| `number`	id of the resource defined in resources collection.
name (optional)	`string`	Name of the resource defined in resources collection.

Returns number

getOccurrencesByID

Retrieves the occurrences of a single recurrence event based on the provided parent ID.

Parameter	Type	Description
eventID	`number` \| `string`	ID of the parent recurrence data from which the occurrences are fetched.

Returns Record[]

getOccurrencesByRange

Retrieves all the occurrences that lies between the specific start and end time range.

Parameter	Type	Description
startTime	`Date`	Denotes the start time range.
endTime	`Date`	Denotes the end time range.

Returns Record[]

getResourceCollections

To get the resource collection

Returns ResourcesModel[]

getResourcesByIndex

Retrieves the resource details based on the provided resource index.

Parameter	Type	Description
index	`number`	index of the resources at the last level.

Returns ResourceDetails

getSelectedElements

Retrieves the selected cell elements.

Returns Element[]

getViewDates

Retrieves an array of dates based on the specified date collection direction.

Parameter	Type	Description
type (optional)	`NavigationDirection`	The direction for date collection. Options are: - ‘Previous’: Returns the previous date range collection from the current rendered date. - ‘Next’: Returns the next date range collection from the current rendered date. - ‘Current’: Returns the current rendered date collection.

Returns Date[]

hideSpinner

When the spinner is shown manually using showSpinner method, it can be hidden using this hideSpinner method.

Returns void

importICalendar

Imports the events from an .ics file downloaded from any of the calendars like Google or Outlook into the Scheduler.
This method accepts the blob object or string format of an .ics file to be imported as a mandatory argument.

Parameter	Type	Description
fileContent	`Blob` \| `string`	Accepts the file object or string format of an .ics file.

Returns void

isSlotAvailable

To check whether the given time range slots are available for event creation or already occupied by other events.
This method currently focuses on validating appointments within the current view date range.
However, it does not extend this availability check to recurrence occurrences outside of the current date range.

Parameter	Type	Description
startTime	`Date` \| `Record`	Denotes the start time of the slot.
endTime (optional)	`Date`	Denotes the end time of the slot.
groupIndex (optional)	`number`	Defines the resource index from last level.

Returns boolean

openEditor

To manually open the event editor on specific time or on certain events.

Parameter	Type	Description
data	`Record`	It can be either cell data or event data.
action	`CurrentAction`	Defines the action for which the editor needs to be opened such as either for new event creation or for editing of existing events. The applicable action names that can be used here are `Add`, `Save`, `EditOccurrence` and `EditSeries`.
isEventData (optional)	`boolean`	It allows to decide whether the editor needs to be opened with the clicked cell details or with the passed event details.
repeatType (optional)	`number`	It opens the editor with the recurrence options based on the provided repeat type.

Returns void

openOverlapAlert

To manually open the overlap validation Alert.

Parameter	Type	Description
args	`PopupOpenEventArgs`	The arguments for opening the popup.

Returns void

openQuickInfoPopup

To manually open the quick info popup based on cell or event details.

Parameter	Type	Description
data	`Record`	Defines the cell or event data. If the data contains valid ID, it will open event quick info popup, otherwise cell quick info popup displayed.

Returns void

paste

Method to create a paste event with clipboard data

Parameter	Type	Description
targetElement	`HTMLElement`	Accepts HTMLElement

Returns void

print

Method allows to print the scheduler.

Parameter	Type	Description
printOptions (optional)	`ScheduleModel`	The export options to be set before start with exporting the Scheduler events to the print window.

Returns void

refreshEvents

Refreshes the event dataSource. This method may be useful when the events alone in the schedule needs to be re-rendered.

Parameter	Type	Description
isRemoteRefresh (optional)	`boolean`	Accepts the boolean to refresh data from remote or local

Returns void

refreshLayout

Refreshes the Schedule layout without re-render.

Returns void

refreshTemplates

Method to refresh the given Schedule templates

Parameter	Type	Description
templateName (optional)	`string`	Accepts the template name

Returns void

removeResource

Removes the specified resource.

Parameter	Type	Description
resourceId	`string` \| `string[]` \| `number` \| `number[]`	Specifies the resource id to be removed.
name	`string`	Specifies the resource name from which the id should be referred.

Returns void

resetWorkHours

Removes or resets different working hours on the required working days by accepting the required start and end time as well as the
date collection as its parameters.
if no parameters has been passed to this function, it will remove all the work hours.

Parameter	Type	Description
dates (optional)	`Date[]`	Collection of dates on which the given start and end hour range need to be applied.
start (optional)	`string`	Defines the work start hour.
end (optional)	`string`	Defines the work end hour.
groupIndex (optional)	`number`	Defines the resource index from last level.

Returns void

saveEvent

Updates the changes made in the event object by passing it as an parameter into the dataSource.

Parameter	Type	Description
data	`Record` \| `Record[]`	Single or collection of event objects to be saved into Schedule.
currentAction (optional)	`CurrentAction`	Denotes the action that takes place either for editing occurrence or series. The valid current action names are `EditOccurrence` or `EditSeries`.

Returns void

scrollTo

Scrolls the Schedule content area to the specified time.

Parameter	Type	Description
hour	`string`	Accepts the time value in the skeleton format of ‘Hm’.
scrollDate (optional)	`Date`	Accepts the date object value.

Returns void

scrollToResource

This method allows scroll to the position of the any resources that available on the scheduler.
This method is applicable for without Agenda and Month agenda views of the schedule.

Parameter	Type	Description
resourceId	`string` \| `number`	Accepts the resource id in either string or number type
groupName (optional)	`string`	Accepts the name of the resource collection

Returns void

selectResourceByIndex

Select the resource based on group index in mobile mode.

Parameter	Type	Description
groupIndex	`number`	Defines the resource index based on last level.

Returns void

setRecurrenceEditor

Set the recurrence editor instance from custom editor template.

Parameter	Type	Description
recurrenceEditor	`RecurrenceEditor`	instance has passed to fetch the instance in event window.

Returns void

setResourceCollections

To set the resource collection

Parameter	Type	Description
resourceCol	`ResourcesModel[]`	Accepts the resource collections in ResourcesModel type
isEventDataRefresh (optional)	`boolean`	Accepts the boolean to refresh the appointment data source from remote or local

Returns void

setWorkHours

Sets different working hours on the required working days by accepting the required start and end time as well as the date collection
as its parameters.

Parameter	Type	Description
dates	`Date[]`	Collection of dates on which the given start and end hour range needs to be applied.
start	`string`	Defines the work start hour.
end	`string`	Defines the work end hour.
groupIndex (optional)	`number`	Defines the resource index from last level.

Returns void

showSpinner

Allows to show the spinner on schedule at the required scenarios.

Returns void

Events

actionBegin EmitType<ActionEventArgs>

Triggers on beginning of every scheduler action.

actionComplete EmitType<ActionEventArgs>

Triggers on successful completion of the scheduler actions.

actionFailure EmitType<ActionEventArgs>

Triggers when a scheduler action gets failed or interrupted and an error information will be returned.

beforePaste EmitType<BeforePasteEventArgs>

Triggers once when pasting an event on the scheduler.

beforePrint EmitType<BeforePrintEventArgs>

Triggers when the print event is called.

cellClick EmitType<CellClickEventArgs>

Triggers when the scheduler cells are single clicked or on single tap on the same cells in mobile devices.

cellDoubleClick EmitType<CellClickEventArgs>

Triggers when the scheduler cells are double clicked.

created EmitType<Record>

Triggers after the scheduler component is created.

dataBinding EmitType<ReturnType>

Triggers before the data binds to the scheduler.

dataBound EmitType<ReturnType>

Triggers once the event data is bound to the scheduler.

destroyed EmitType<Record>

Triggers when the scheduler component is destroyed.

drag EmitType<DragEventArgs>

Triggers when an appointment is being in a dragged state.

dragStart EmitType<DragEventArgs>

Triggers when an appointment is started to drag.

dragStop EmitType<DragEventArgs>

Triggers when the dragging of appointment is stopped.

eventClick EmitType<EventClickArgs>

Triggers when the events are single clicked or on single tapping the events on the mobile devices.

eventDoubleClick EmitType<EventClickArgs>

Triggers when the events are double clicked or on double tapping the events on the desktop devices.

eventRendered EmitType<EventRenderedArgs>

Triggers before each of the event getting rendered on the scheduler user interface.

excelExport EmitType<ExcelExportEventArgs>

Triggers before the Excel export process begins.

hover EmitType<HoverEventArgs>

Triggers when the scheduler elements are hovered.

moreEventsClick EmitType<MoreEventsClickArgs>

Triggers when the more events indicator are clicked.

navigating EmitType<NavigatingEventArgs>

Triggers before the date or view navigation takes place on scheduler.

popupClose EmitType<PopupCloseEventArgs>

Triggers before any of the scheduler popups close on the page.

popupOpen EmitType<PopupOpenEventArgs>

Triggers before any of the scheduler popups opens on the page.

renderCell EmitType<RenderCellEventArgs>

Triggers before each element of the schedule rendering on the page.

resizeStart EmitType<ResizeEventArgs>

Triggers when an appointment is started to resize.

resizeStop EmitType<ResizeEventArgs>

Triggers when the resizing of appointment is stopped.

resizing EmitType<ResizeEventArgs>

Triggers when an appointment is being in a resizing action.

select EmitType<SelectEventArgs>

Triggers when multiple cells or events are selected on the Scheduler.

tooltipOpen EmitType<TooltipOpenEventArgs>

Triggers before the tooltip is rendered.

virtualScrollStart EmitType<ScrollEventArgs>

Triggers when the scroll action is started.
This event triggers only when allowVirtualScrolling or enableLazyLoading properties are enabled along with resource grouping.

virtualScrollStop EmitType<ScrollEventArgs>

Triggers when the scroll action is stopped.
This event triggers only when allowVirtualScrolling or enableLazyLoading properties are enabled along with resource grouping.