Add edit and remove events in Angular Schedule component

9 Oct 202512 minutes to read

CRUD actions can be manually performed on appointments using the addEvent, saveEvent, and deleteEvent methods in the Syncfusion Angular Schedule component, as shown below.

Normal events

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 { Component, ViewChild } from '@angular/core';
import { EventSettingsModel, ScheduleComponent } from '@syncfusion/ej2-angular-schedule';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';

@Component({
imports: [
        
        ScheduleModule,
        ButtonModule
    ],

providers: [DayService, 
                WeekService, 
                WorkWeekService, 
                MonthService,
                AgendaService,
                MonthAgendaService],
standalone: true,
  selector: 'app-root',
  // specifies the template string for the Schedule component
  template: `<button #addButtonObj ejs-button cssClass='e-info' (click)='add()'> Add </button>
  <button #editButtonObj ejs-button cssClass='e-info' (click)='edit()'> Edit </button>
  <button #deleteButtonObj ejs-button cssClass='e-info' (click)='delete()'> Delete </button>
  <ejs-schedule #scheduleObj width='100%' height='550px' [selectedDate]="selectedDate" [eventSettings]="eventSettings" > <e-views> <e-view option="Week"></e-view> <e-view option="WorkWeek"></e-view> <e-view option="Month"></e-view> <e-view option="Day"></e-view> </e-views> </ejs-schedule>`
})
export class AppComponent {
    @ViewChild('scheduleObj', { static: true })
    public scheduleObj?: ScheduleComponent;
    @ViewChild('addButtonObj', { static: true })
    public addButtonObj?: ButtonComponent;
    @ViewChild('editButtonObj', { static: true })
    public editButtonObj?: ButtonComponent;
    @ViewChild('deleteButtonObj', { static: true })
    public deleteButtonObj?: ButtonComponent;
    public data: object [] = [{
        Id: 3,
        Subject: 'Testing',
        StartTime: new Date(2018, 1, 11, 9, 0),
        EndTime: new Date(2018, 1, 11, 10, 0),
        IsAllDay: false
        },{
        Id: 4,
        Subject: 'Vacation',
        StartTime: new Date(2018, 1, 13, 9, 0),
        EndTime: new Date(2018, 1, 13, 10, 0),
        IsAllDay: false
    }];
    public selectedDate: Date = new Date(2018, 1, 15);
    public eventSettings: EventSettingsModel = { dataSource: this.data };
    add(): void {
        let Data: Object[] = [{
            Id: 1,
            Subject: 'Conference',
            StartTime: new Date(2018, 1, 12, 9, 0),
            EndTime: new Date(2018, 1, 12, 10, 0),
            IsAllDay: false
        },{
            Id: 2,
            Subject: 'Meeting',
            StartTime: new Date(2018, 1, 15, 10, 0),
            EndTime: new Date(2018, 1, 15, 11, 30),
            IsAllDay: false
            }];
        this.scheduleObj?.addEvent(Data);
        this.addButtonObj?.element.setAttribute('disabled','true');
    }
    edit(): void {
        let data: { [key: string]: Object; } = {
            Id: 3,
            Subject: 'Testing-edited',
            StartTime: new Date(2018, 1, 11, 10, 0),
            EndTime: new Date(2018, 1, 11, 11, 0),
            IsAllDay: false
        };
        this.scheduleObj?.saveEvent(data);
        this.editButtonObj?.element.setAttribute('disabled','true');
    }
    delete(): void {
        this.scheduleObj?.deleteEvent(4);
        this.deleteButtonObj?.element.setAttribute('disabled','true');
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Recurring events

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 { Component, ViewChild } from '@angular/core';
import { EventSettingsModel, ScheduleComponent } from '@syncfusion/ej2-angular-schedule';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';
import { DataManager, Query } from '@syncfusion/ej2-data';

@Component({
imports: [
        
        ScheduleModule,
        ButtonModule
    ],

providers: [DayService, 
                WeekService, 
                WorkWeekService, 
                MonthService,
                AgendaService,
                MonthAgendaService],
standalone: true,
    selector: 'app-root',
    // specifies the template string for the Schedule component
    template: `<button #addButtonObj ejs-button cssClass='e-info' (click)='add()'> Add </button>
  <button #editButtonObj ejs-button cssClass='e-info' (click)='edit()'> Edit </button>
  <button #deleteButtonObj ejs-button cssClass='e-info' (click)='delete()'> Delete </button>
  <ejs-schedule #scheduleObj width='100%' height='550px' [selectedDate]="selectedDate" [eventSettings]="eventSettings" > <e-views> <e-view option="Week"></e-view> <e-view option="WorkWeek"></e-view> <e-view option="Month"></e-view> <e-view option="Day"></e-view> </e-views> </ejs-schedule>`
})
export class AppComponent {
    @ViewChild('scheduleObj')
    public scheduleObj?: ScheduleComponent;
    @ViewChild('addButtonObj')
    public addButtonObj?: ButtonComponent;
    @ViewChild('editButtonObj')
    public editButtonObj?: ButtonComponent;
    @ViewChild('deleteButtonObj')
    public deleteButtonObj?: ButtonComponent;
    public data: object[] = [{
        Id: 3,
        Subject: 'Testing',
        StartTime: new Date(2018, 1, 11, 9, 0),
        EndTime: new Date(2018, 1, 11, 10, 0),
        IsAllDay: false,
        RecurrenceRule: 'FREQ=DAILY;INTERVAL=1;COUNT=3',
    }, {
        Id: 4,
        Subject: 'Vacation',
        StartTime: new Date(2018, 1, 12, 11, 0),
        EndTime: new Date(2018, 1, 12, 12, 0),
        IsAllDay: false,
        RecurrenceRule: 'FREQ=DAILY;INTERVAL=1;COUNT=2',
    }];
    public selectedDate: Date = new Date(2018, 1, 15);
    public eventSettings: EventSettingsModel = { dataSource: this.data };
    add(): void {
        let Data: Object[] = [{
            Id: 1,
            Subject: 'Conference',
            StartTime: new Date(2018, 1, 15, 9, 0),
            EndTime: new Date(2018, 1, 15, 10, 0),
            IsAllDay: false,
            RecurrenceRule: 'FREQ=DAILY;INTERVAL=1;COUNT=2'
        }];
        this.scheduleObj?.addEvent(Data);
        this.addButtonObj?.element.setAttribute('disabled', 'true');
    }
    edit(): void {
        let data:  any[] = new DataManager(this.scheduleObj?.getCurrentViewEvents()).executeLocal(new Query().where('RecurrenceID', 'equal', 3));
        data[0].Subject = 'Occurence edited';
        this.scheduleObj?.saveEvent(data[0], 'EditOccurrence');
        this.editButtonObj?.element.setAttribute('disabled', 'true');
    }
    delete(): void {
        this.scheduleObj?.deleteEvent(4, 'DeleteSeries');
        this.deleteButtonObj?.element.setAttribute('disabled', 'true');
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

```