单击事件打开组件：angular 日历

Question

我已经实现了 angular 日历（来自 https://angular-calendar.com/#/kitchen-sink），它工作正常并显示来自我的 Spring 启动 API...

的数据

this.service.getAll().subscribe(
  data => {
  data.forEach(element=>{
    this.event =
    {
      start: addHours(startOfDay(element.dateIntervention), 8),
       end: endOfDay(element.date),
      title: element.employee,
      color: colors.red,
      //actions: this.actions,
      resizable: {
        beforeStart: true,
        afterEnd: true
      },
      draggable: true
    };
     this.events.push(this.event)
     this.viewDate = new Date(); 
  })
},
  error => { console.log(error); }
);

我只想为其添加一项功能，即允许在特定事件点击时打开window（使用 NbWindowService）

例如这个

Answer 1

我通过在 HTML

中将 eventClicked 添加到 mwl-calendar-week-view 来修复它

<mwl-calendar-week-view 
    (eventClicked)="eventClicked($event)"
</mwl-calendar-week-view>

并在 TS

中创建此方法

 eventClicked({ event }: { event: CalendarEvent }): void {
    this.windowService.open(ModalMyComponent, { title: `bla bla` });

  }

单击事件打开组件：angular 日历

open component on event click : angular calendar

calendar

angular

angular-calendar

angular8