how to add new event in calendar and apply drag and drop to it using angular cdk?

Question

I am using NgxEventCalendarModule to create an event calendar to do the following task:

1. User can add a new event
2. user can edit the events
3. user can see the events
4. user can drag and drop event here is my app.component.html

<div style="height: 100%; width: 100%;border: 1px solid gray;" >
    <ngx-event-calendar
    [showAddButton]="true" 
    [language]="'en'"
    [dataSource]="dataArray"
    (dayEvents)="selectDay($event)"
    (newEvent)="addEvent($event)">
    </ngx-event-calendar >
</div>

and app.component.ts

export class AppComponent {
  title = 'de-calendar';
  language: string = 'en';
  dataArray: IEventData[] = testData;

  constructor(public dialog: MatDialog) { }

  addEvent(event) {
    alert(event);
  }

  dayEvents(event) {
  }

  selectDay(event) {

    if (event.events) {
      const dialogRef = this.dialog.open(AddEventDialogComponent, {
        width: '80%',
        height: '90%', 
        data: event
      });
    }

  }

IEventData.ts

export interface IEventData {
  id: number;
  title: string;
  desc?: string;
  startDate: Date;
  endDate: Date;
  createdBy?: string;
  createdAt?: Date;
  type?: number;
  color?: string;
}

testData.ts

import { IEventData } from '../Interface/IEventData';
export const testData: IEventData[] = [
  { id: 20, title: 'Meeting with Manager', desc: 'Talk abut the new Task',
  startDate: new Date("2022-12-22T21:00:00"), endDate: new Date("2022-12-26T23:00:00"), createdBy: 'Mark',
  createdAt: new Date("2022-12-22T10:00:00"), type: 2, color: 'red' },
  { id: 12, title: 'Play Footbal', desc: 'Play FootBall wih freinds',
  startDate: new Date("2022-12-19T13:43:00"), endDate: new Date("2022-12-23T15:00:00"), createdBy: 'Mark',
  createdAt: new Date("2022-12-19T10:00:00"), type: 2, color: 'green' },
];

AddEventDialogComponent

export class AddEventDialogComponent implements OnInit {

  startDate;
  startHours;
  startMinutes;
  endDate;
  endHours;
  endMinutes;
  hours:any;
  minutes:any;
  colours;
  newEvent = {} as IEventData;

  constructor(public dialogRef: MatDialogRef<EventDialogComponent>) { }

  ngOnInit() {
    this.hours = hours;
    this.minutes = minutes;
    this.colours = colours;
  }

  btn_SaveClick() {

    this.startDate.setHours(this.startDate.getHours() + this.startHours)
    this.startDate.setMinutes(this.startDate.getMinutes() + this.startMinutes)

    this.endDate.setHours(this.endDate.getHours() + this.endHours)
    this.endDate.setMinutes(this.endDate.getMinutes() + this.endMinutes);
    
    this.newEvent.startDate = this.startDate;
    this.newEvent.endDate = this.endDate;
  

    this.dialogRef.close(AddEventDialogComponent);
    
  }

AddEventDialogComponent.html

<h4>Add New Event</h4>
<mat-divider></mat-divider>

<div class="container">

    <div class="first">
    
        <mat-form-field class="date-picker">
            <input readonly matInput [matDatepicker]="picker1" placeholder="Start date:" [(ngModel)]="startDate" (click)="picker1.open()">
            <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
            <mat-datepicker touchUi="true" #picker1></mat-datepicker>
        </mat-form-field>

        <mat-form-field class="date-picker">
            <mat-label>Hours</mat-label>
            <mat-select [(ngModel)]="startHours">
                <mat-option *ngFor="let h of hours" [value]="h.id">{{ h.name }}</mat-option>
            </mat-select>
        </mat-form-field>

        <mat-form-field class="date-picker">
            <mat-label>Minutes</mat-label>
            <mat-select [(ngModel)]="startMinutes">
                <mat-option *ngFor="let m of minutes" [value]="m.id">{{ m.minute }}</mat-option>
            </mat-select>
        </mat-form-field>

    </div>
    <div class="first">
        <mat-form-field class="date-picker">
            <input readonly matInput [matDatepicker]="picker2" placeholder="End date:" [(ngModel)]="endDate" (click)="picker2.open()">
            <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
            <mat-datepicker touchUi="true" #picker2></mat-datepicker>
        </mat-form-field>

        <mat-form-field class="date-picker">
            <mat-label>Hours</mat-label>
            <mat-select [(ngModel)]="endHours">
                <mat-option *ngFor="let h of hours" [value]="h.id">{{ h.name }}</mat-option>
            </mat-select>
        </mat-form-field>

        <mat-form-field class="date-picker">
            <mat-label>Minutes</mat-label>
            <mat-select [(ngModel)]="endMinutes">
                <mat-option *ngFor="let m of minutes" [value]="m.id">{{ m.minute }}</mat-option>
            </mat-select>

        </mat-form-field>


    </div>

    <div class="second">
    <mat-form-field class="example-full-width" (keydown.enter)="btn_SaveClick()">
        <input matInput placeholder="Title:" [(ngModel)]="newEvent.title">
    </mat-form-field>
       
    <mat-form-field class="example-full-width" (keydown.enter)="btn_SaveClick()">
        <input matInput placeholder="Description:" [(ngModel)]="newEvent.desc">
    </mat-form-field>

    <mat-form-field class="example-full-width" (keydown.enter)="btn_SaveClick()">
        <input matInput placeholder="Created By:" [(ngModel)]="newEvent.createdBy">
    </mat-form-field>

    <mat-form-field class="example-full-width">
        <mat-label>Colours</mat-label>
        <mat-select [(ngModel)]="newEvent.color">
            <mat-option *ngFor="let color of colours" [value]="color.value">{{ color.name }}</mat-option>
        </mat-select>

    </mat-form-field>

    <button mat-raised-button color="primary" (click)="btn_SaveClick()" 
    (keydown.enter)="btn_SaveClick()" [disabled]="!startDate || !startHours || !startMinutes || !endDate || !endHours ||
    !endMinutes || !newEvent.title || (startDate > endDate) || (startDate >= endDate && startHours > endHours) ||
    (startDate >= endDate && startHours >= endHours && startMinutes >= endMinutes)">SAVE</button>
</div>

</div>

the testData successfully works for me and shows the data on a calendar but when I want to add a new event from the Interface it does not add the event!!!

here is the running app picture

can anyone help me how to add a new event from Interface and apply drag and drop to the event using angular CDK?????