You added new events and methods to enable creation of custom modals to handle adding or editing events. However, I can't make it work. If I click "add event" button in calendar plug-in, it triggers addEvent1($event), but instead of opening my custom modal CalendarEventComponent it opens standard modal. However, If I click separate button and it triggers addEvent() it opens my custom modal, and it works as expected. What do I need to change in order to use plug-in's "Add Event" button to open custom modal? Thank you.

HTML:

<mdb-calendar [events]="calendarEvents" [readonly]="false" #calendar
  (prev)="onPeriodChange()"
  (next)="onPeriodChange()"
  (eventEdit)="editEvent1($event)"
  (eventAdd)="addEvent1($event)"
  (eventDelete)="deleteEvent1($event)"
></mdb-calendar>

<button  type="button"
      class="btn-outline-primary btn" title="Add event" (click)="addEvent()">
      Add
    </button>

TS:

addEvent1(e: any): void {
    console.log(e);
    const md = this.modalService.open(CalendarEventComponent, {
        modalClass: 'modal-lg',
        data: { scheduleId: 0, calendarType: 1 },
    });

    md.onClose.subscribe(newEvent => {
        console.log(newEvent);
    });
}

addEvent(): void
{
    const calendarType = this.isPublic ? 1 : 0;
    const md = this.modalService.open(CalendarEventComponent, {
        modalClass: 'modal-lg',
        data: { scheduleId: 0, calendarType },
    });

    md.onClose.subscribe( (updatedEvent: CalendarModel) => {
        console.log(newEvent);
    });
}