ค้นหาเว็บไซต์

typescript - วิธีการใช้งานลากแล้ววางในปฏิทินเหตุการณ์ใน Angular 14 โดยใช้ cdk?


ฉันต้องการใช้ฟังก์ชันลากและวางกับปฏิทินโดยใช้ Angular CDK ฉันได้ลองวิธีการดังต่อไปนี้:

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
      });
    }
  }

ภาพ

ฉันต้องการใช้งานการลากและวาง เมื่อผู้ใช้เลือกเหตุการณ์ มันสามารถลากและวางไปบนปฏิทินได้ โค้ดของฉันไม่ทำงาน มีใครช่วยฉันได้ไหม?? ขอบคุณ