角全日历在单击日期时添加事件

问题描述

您好，希望您能对此有所帮助

我正在使用Angular 10和完整日历v5，我想知道如何在单击时将事件添加到当天

export class CalendarComponent implements OnInit{

  nomaction;

  constructor(public dialog: MatDialog) { }

  ngOnInit(): void {
    
  }


calendarOptions: CalendarOptions = {
    initialView: 'dayGridMonth',weekends: true,dateClick: this.handleDateClick.bind(this),// bind is important!
    events: [
      { title: 'event 1',date: '2020-08-20' },{ title: 'event 2',date: '2020-08-21' }
    ]
  };

  handleDateClick(arg) {
  
    const dialogRef = this.dialog.open(AddeventComponent,{
      width: '250px',data: {nomaction: this.nomaction}
    });

    dialogRef.afterClosed().subscribe(result => {
      this.nomaction = result.nomaction;
      this.calendarOptions.events = [{ title: this.nomaction,date: arg.dateStr }];//a code for adding an event into the day
      console.log('action',this.nomaction);
    });

   
  }

  toggleWeekends() {
    this.calendarOptions.weekends = !this.calendarOptions.weekends 
     }

 }

this.calendarOptions.events不是数组，因此我无法使用push添加对象！

如何添加它而不丢失我的第一个数据！

解决方法

在您的日历选项中添加：

calendarOptions: CalendarOptions = {
    initialView: 'dayGridMonth',weekends: true,dateClick: this.handleDateClick.bind(this),// bind is important!
    events: [
      { title: 'event 1',date: '2020-08-20' },{ title: 'event 2',date: '2020-08-21' }
    ],dateClick:function (info) {
        console.log("See day infos: ",info);
    }
  };

我让你documentation 在这里