Angular Scheduler Methods

<dx-button
    text="Delete"
    (onClick)="deleteAppointment()">
</dx-button>
<dx-scheduler
    [(dataSource)]="appointments"
    [currentDate]="currentDate">
</dx-scheduler>

import { Component, ViewChild } from "@angular/core";
import { Appointment, Service } from './app.service';
import { DxSchedulerComponent } from "devextreme-angular";
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent  {
    @ViewChild(DxSchedulerComponent, { static: false }) scheduler: DxSchedulerComponent;
    // Prior to Angular 8
    // @ViewChild(DxSchedulerComponent) scheduler: DxSchedulerComponent;
    currentDate: Date = new Date(2018, 4, 25);
    appointments: Appointment[];

    constructor(service: Service) {
        this.appointments = service.getAppointments();
    }

    deleteAppointment() {
        this.scheduler.instance.deleteAppointment(this.appointments[0]);
    }
}

import { Injectable } from "@angular/core";

export class Appointment {
    text: string;
    startDate: Date;
    endDate: Date;
    recurrenceRule?: string;
}

let appointments: Appointment[] = [{
    text: "Website Re-Design Plan",
    startDate: new Date(2018, 4, 25, 9, 0),
    endDate: new Date(2018, 4, 25, 9, 30),
    recurrenceRule: "FREQ=DAILY;COUNT=10"
}, 
// ...
];

@Injectable()
export class Service {
    getAppointments(): Appointment[] {
        return appointments;
    }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { 
    DxButtonModule, 
    DxSchedulerModule
} from "devextreme-angular";

import { Service } from './app.service';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxButtonModule,
        DxSchedulerModule
    ],
    providers: [
        Service
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

<template>
    <div>
        <DxButton 
            text="Delete" 
            @click="deleteAppointment" />
        <DxScheduler :ref="schedulerRef"
            :data-source="dataSource"
            :current-date="currentDate" />
    </div>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import DxScheduler from 'devextreme-vue/scheduler';
import DxButton from 'devextreme-vue/button';
import { appointments } from './data.js';

const schedulerRef = "scheduler";

export default {
    components: {
        DxScheduler,
        DxButton
    },
    data() {
        return {
            schedulerRef,
            currentDate: new Date(2018, 4, 25),
            dataSource: appointments
        };
    },
    methods: {
        deleteAppointment() {
            this.scheduler.deleteAppointment(appointments[0]);
        } 
    },
    computed: {
        scheduler: function() {
            return this.$refs[schedulerRef].instance;
        }
    }
};
</script>

export const appointments = [{
    text: "Website Re-Design Plan",
    startDate: new Date(2018, 4, 25, 9, 0),
    endDate: new Date(2018, 4, 25, 9, 30),
    recurrenceRule: "FREQ=DAILY;COUNT=10"
}, 
// ...
];

import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import Scheduler from 'devextreme-react/scheduler';
import Button from 'devextreme-react/button';
import { appointments } from './data.js';

const currentDate = new Date(2018, 4, 25);

class App extends React.Component {
    constructor(props) {
        super(props);

        this.schedulerRef = React.createRef();

        this.deleteAppointment = () => {
            this.scheduler.deleteAppointment(appointments[0]);
        }
    }

    get scheduler() {
        return this.schedulerRef.current.instance;
    }

    render() {
        return (
            <div>
                <Button text="Delete" onClick={this.deleteAppointment} />
                <Scheduler ref={this.schedulerRef}
                    dataSource={appointments}
                    defaultCurrentDate={currentDate} />
            </div>
        );
    }
}
export default App;

export const appointments = [{
    text: "Website Re-Design Plan",
    startDate: new Date(2018, 4, 25, 9, 0),
    endDate: new Date(2018, 4, 25, 9, 30),
    recurrenceRule: "FREQ=DAILY;COUNT=10"
}, 
// ...
];