How to Binding local data in Event Scheduler in Angular 7 ?

- app.component.html

<router-outlet></router-outlet>

- app.component.ts

import { Component } from '@angular/core';

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

@Component({

  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 selectedDate: Date = new Date(2028, 1, 15);

    public eventSettings: EventSettingsModel = {

        dataSource: [

        {

            Id: 1,

            Subject: 'Explosion of Betelgeuse Star',

            StartTime: new Date(2018, 1, 15, 9, 30),

            EndTime: new Date(2018, 1, 15, 11, 0)

        }, {

            Id: 2,

            Subject: 'Thule Air Crash Report',

            StartTime: new Date(2018, 1, 12, 12, 0),

            EndTime: new Date(2018, 1, 12, 14, 0)

        }, {

            Id: 3,

            Subject: 'Blue Moon Eclipse',

            StartTime: new Date(2018, 1, 13, 9, 30),

            EndTime: new Date(2018, 1, 13, 11, 0)

        }]

    };

 }

- app.module.ts

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { ScheduleModule } from '@syncfusion/ej2-angular-schedule';

import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

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

import { AppComponent } from './app.component';

/**

 * Module

 */

@NgModule({

    imports: [

        BrowserModule,

        ScheduleModule,

        ButtonModule

    ],

    declarations: [AppComponent],

    bootstrap: [AppComponent],

    providers: [DayService, 

                WeekService, 

                WorkWeekService, 

                MonthService,

                AgendaService,

                MonthAgendaService]

})

export class AppModule { }

-app-routing.module.ts

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule { }

Note:

Setup Angular Environment

You can use Angular CLI to setup your Angular applications. To install Angular CLI use the following command.

npm install -g @angular/cli

Create an Angular Application

Start a new Angular application using below Angular CLI command.

ng new my-app

cd my-app

Adding Syncfusion Schedule package

To install Schedule component, use the following command.

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