angularcalendarangular8angular-calendar

open component on event click : angular calendar

I have implemented angular calendar (from https://angular-calendar.com/#/kitchen-sink), it works fine and shows data from my Spring Boot 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); }
);

I just want to add a feature for it which is the permission to open a window (using NbWindowService) on a particular event click

for example this

enter image description here

Solution

  • I fixed it by adding eventClicked to mwl-calendar-week-view in the HTML

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

    and by creating this method in TS

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

  }