how to implement drag and drop in event calendar in angular 14 using cdk?

Question

I want to apply drag-and-drop to the calendar using Angular CDK I tried the following methods:

AppComponent.html

<div style="height: 100%; width: 100%;border: 1px solid gray;" cdkDropListGroup >

    <ngx-event-calendar
    [showAddButton]="true" 
    [language]="'en'"
    [dataSource]="dataArray"
    (dayEvents)="selectDay($event)"
    (newEvent)="addEvent($event)"
    cdkDrag
    cdkDragHandle
   >
    </ngx-event-calendar >
</div>

AppComponent.ts

export class AppComponent {
  title = 'calendar';
  language: string = 'en';
  newEvent = {} as IEventData;
  dataArray;

  constructor(public dialog: MatDialog) {
    const testData: IEventData[] = [ ];
    this.dataArray=testData;
    this.newEvent.id=13;
    this.newEvent.title='Title';
    this.newEvent.desc='Description';
    this.newEvent.startDate= new Date("2022-12-22T21:00:00");
    this.newEvent.endDate= new Date("2022-12-22T21:00:00");
    this.newEvent.createdBy='Mark';
    this.newEvent.createdAt=new Date("2022-12-22T10:00:00");
    this.newEvent.type=2;
    this.newEvent.color='red';
    testData.push(this.newEvent);
   }

  addEvent(event) {
   
  }



  selectDay(event) {

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

the Image

I want to Implement drag and drop, when the user selects an event it can be drag and drop to the calendar my code doest not work can any one help me?? thanks