Getting started with Angular Schedule component

9 Oct 202511 minutes to read

This section explains how to create Angular Scheduler component and configure its features in an Angular environment.

For a quick start with the Angular Schedule component using CLI and Schematics, you can watch this video:

Prerequisites

You can use Angular CLI to set up your Angular applications. To install the Angular CLI, use the following command.

npm install -g @angular/cli

Create an Angular application

Create a new Angular application using the following Angular CLI command.

ng new my-app
cd my-app

Installing Syncfusion^® Schedule package

Syncfusion^® packages are distributed on npm as @syncfusion scoped packages. You can find all the Angular Syncfusion^® packages on npm.

Syncfusion^® provides two types of package structures for Angular components:

Ivy library distribution package format
Angular compatibility compiler(Angular’s legacy compilation and rendering pipeline) package.

Ivy library distribution package

Syncfusion^® Angular packages (>=20.2.36) use the Ivy distribution to support the Angular Ivy rendering engine and the package are compatible with Angular version 12 and above. Use the following command to install the latest Ivy package.

Add @syncfusion/ej2-angular-schedule package to the application.

npm install @syncfusion/ej2-angular-schedule --save

Angular compatibility compiled (NGCC) package

For Angular versions below 12, you can use the legacy (ngcc) package of the Syncfusion^® Angular components. To download the ngcc package use the below.

Add @syncfusion/ej2-angular-schedule@ngcc package to the application.

npm install @syncfusion/ej2-angular-schedule@ngcc --save

To specify the NGCC package in package.json, add the -ngcc suffix to the version number.

@syncfusion/ej2-angular-schedule:"20.2.38-ngcc"

Note: If the ngcc tag is not specified while installing the package, the Ivy Library Package will be installed and this package will throw a warning.

Adding CSS reference

The necessary CSS files for the Schedule component are located in the ej2-angular-schedule package. You can reference them in your [src/styles.css] file.

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-angular-schedule/styles/material.css';

Module injection

The Schedule component includes several view types that are available as individual modules. To use these views, you must inject the required modules. The available modules are:

Day: For displaying the day view.
Week: For displaying the week view.
WorkWeek: For displaying the work week view.
Month: For displaying the month view.
Year: For displaying the year view.
Agenda: For displaying the agenda view.
MonthAgenda: For displaying the month agenda view.
TimelineViews: For displaying timeline day, timeline week, and timeline work week views.
TimelineMonth: For displaying the timeline month view.
TimelineYear: For displaying the timeline year view.

Inject these modules into the Schedule component using the providers array in your app.component.ts file, as shown below. Only the injected views will be available in the Schedule.

[src/app/app.component.ts]

import { Component } from '@angular/core';
import { DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService, TimelineViewsService, TimelineMonthService, TimelineYearService } from '@syncfusion/ej2-angular-schedule';

@Component({
  selector: 'app-root',
  providers: [DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService, TimelineViewsService, TimelineMonthService, TimelineYearService]
  // ...
})
export class AppComponent { }

Initialize the Schedule component

Modify the template in [src/app/app.component.ts] to render the ejs-schedule component.

[src/app/app.component.ts]

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

@Component({
  imports: [       
    ScheduleModule
  ],
  standalone: true,
  selector: 'app-root',
  providers: [DayService, WeekService, WorkWeekService, MonthService, AgendaService],
  // Specifies the template string for the Schedule component
  template: `<ejs-schedule></ejs-schedule>`
})
export class AppComponent { }

Now, run the application using the following command.

npm start

The output will display an empty Schedule component.

Populating appointments

To populate the Schedule with appointments, you can use either a local JSON array or a remote data service. Assign the data to the dataSource property, which is part of the eventSettings configuration.

The StartTime and EndTime fields are mandatory for each appointment. The following example uses default fields like Id, Subject, StartTime, and EndTime.

[src/app/app.component.ts]

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

@Component({
imports: [       
      ScheduleModule, ScheduleAllModule
    ],
  standalone: true,
  selector: 'app-root',
  // specifies the template string for the Schedule component
  template: `<ejs-schedule [eventSettings]='eventSettings'></ejs-schedule>`
})
export class AppComponent {
  public data: object[] = [{
    Id: 1,
    Subject: 'Meeting',
    StartTime: new Date(2018, 1, 15, 10, 0),
    EndTime: new Date(2018, 1, 15, 12, 30)
  }];
  public eventSettings: EventSettingsModel = {
    dataSource: this.data
  };
}

You can also provide different names to these default fields, for which the custom names of those fields must be mapped appropriately within fields property as shown below.

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

@Component({
imports: [       
      ScheduleModule, ScheduleAllModule
    ],
    standalone: true,
    selector: 'app-root',
    providers: [DayService, WeekService, WorkWeekService, MonthService, AgendaService],
    // Specifies the template string for the Schedule component
    template: `<ejs-schedule width='100%' height='550px' [selectedDate]='selectedDate'
    [eventSettings]='eventSettings'></ejs-schedule>`
  })
  export class AppComponent {
    public data: object [] = [{
      id: 2,
      eventName: 'Meeting',
      startTime: new Date(2018, 1, 15, 10, 0),
      endTime: new Date(2018, 1, 15, 12, 30),
      isAllDay: false
    }];
    public selectedDate: Date = new Date(2018, 1, 15);
    public eventSettings: EventSettingsModel = {
      dataSource: this.data,
      fields: {
        id: 'id',
        subject: { name: 'eventName' },
        isAllDay: { name: 'isAllDay' },
        startTime: { name: 'startTime' },
        endTime: { name: 'endTime' },
      }
    };
  }

For a full list of available appointment fields, refer to the event fields documentation.

Setting the date

By default, the Schedule component displays the current system date. To set a specific date, use the selectedDate property.

[src/app/app.component.ts]

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

@Component({
imports: [       
      ScheduleModule, ScheduleAllModule
    ],
    standalone: true,
    selector: 'app-root',
    providers: [DayService, WeekService, WorkWeekService, MonthService, AgendaService],
    // specifies the template string for the Schedule component
    template: `<ejs-schedule width='100%' height='550px' [selectedDate]='selectedDate'></ejs-schedule>`
})
export class AppComponent {
  public selectedDate: Date = new Date(2018, 1, 15);
}

Setting the view

The default view of the Schedule is Week. To change the current view, set the currentView property to one of the following view names:

Day
Week
WorkWeek
Month
Year
Agenda
MonthAgenda
TimelineDay
TimelineWeek
TimelineWorkWeek
TimelineMonth
TimelineYear

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

@Component({
imports: [       
      ScheduleModule, ScheduleAllModule
    ],
    standalone: true,
    selector: 'app-root',
    providers: [DayService, WeekService, WorkWeekService, MonthService, AgendaService],
    // specifies the template string for the Schedule component
    template: `<ejs-schedule width='100%' height='550px' [selectedDate]='selectedDate' [currentView]='currentView' ></ejs-schedule>`
  })
export class AppComponent {
  public selectedDate: Date = new Date(2018, 1, 15);
  public currentView: View = 'Month';
}

Individual view customization

Each individual Scheduler views can be customized with its own options such as setting different start and end hour on Week and Work Week views, whereas hiding the weekend days on Month view alone.
This can be achieved by defining views property to accept the array of object type, where each object depicts the individual view customization.

The output will display the Scheduler with the specified view configuration.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ScheduleModule, View } from '@syncfusion/ej2-angular-schedule'
import { Component } from '@angular/core';
import { WeekService, MonthService, WorkWeekService, EventSettingsModel } from '@syncfusion/ej2-angular-schedule';
import { defaultData } from './datasource';

@Component({
  imports: [ScheduleModule],
  standalone: true,
  selector: 'app-root',
  providers: [WeekService, MonthService, WorkWeekService],
  // specifies the template string for the Schedule component
  template: `<ejs-schedule width='100%' height='550px' [selectedDate]="selectedDate" [eventSettings]="eventSettings"><e-views> <e-view option="Week" startHour="07:00" endHour="15:00"></e-view>
  <e-view option="WorkWeek" startHour="10:00" endHour="18:00"></e-view> <e-view option="Month" [showWeekend]="showWeekend"></e-view></e-views></ejs-schedule>`
})
export class AppComponent {
  public selectedDate: Date = new Date(2018, 1, 15);
  public showWeekend: boolean = false;
  public eventSettings: EventSettingsModel = { dataSource: defaultData };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

You can also explore our Angular Schedule Example, which shows how to use toolbar buttons to interact with Schedule features.
```

Search docs

Ask HelpBot

Search docs

Ask HelpBot

Getting started with Angular Schedule component

Prerequisites

Create an Angular application

Installing Syncfusion^® Schedule package

Ivy library distribution package

Angular compatibility compiled (NGCC) package

Adding CSS reference

Module injection

Initialize the Schedule component

Populating appointments

Setting the date

Setting the view

Individual view customization

Getting started with Angular Schedule component

Prerequisites

Create an Angular application

Installing Syncfusion® Schedule package

Ivy library distribution package

Angular compatibility compiled (NGCC) package

Adding CSS reference

Module injection

Initialize the Schedule component

Populating appointments

Setting the date

Setting the view

Individual view customization

Installing Syncfusion^® Schedule package