Добавление события в полный календарь в Angular

Question

Я хочу отобразить события, которые я добавляю в календарь, но в приведенном ниже коде я получаю отдельный календарь для каждого добавляемого события. Какие изменения я должен внести здесь, чтобы получить этот вывод?

календарь .Component. html

<full-calendar defaultView="dayGridMonth" [plugins]="calendarPlugins"
      defaultView="dayGridMonth"
      [plugins]="calendarPlugins"
      [weekends]="true"
                   *ngFor="let eve of list"
      [events]="[
      { title: eve.activity, date: eve.date }
      ]">
    </full-calendar>

calendar.Component.ts

export class CalendarComponent implements OnInit {

  list: Event[];
  constructor(private service: EventService,
              private firestore: AngularFirestore) { }

  calendarPlugins = [dayGridPlugin];

  ngOnInit(): void {
    this.service.getEvents().subscribe(actionArray => {
      this.list = actionArray.map(item => {
        return {
          id: item.payload.doc.id,
          ...(item.payload.doc.data() as object)
        } as Event;
      });
    });
  }

  onEdit(eve: Event){
    this.service.formData = Object.assign({}, eve);
  }

  onDelete(id: string){
    if (confirm('Are you sure')){
      this.firestore.doc('events/' + id).delete();
    }
  }

}