Angular 10 FullCalendar Rest Api无jQuery

如何将事件放入日历中

HTML

这是我的Api响应

1[{…}] 0: 日期：2018-03-29T13:34:00.000+0200 holidayGR:{id:21，holiday:First Event} 身份证号码：7 原型：对象

有什么帮助吗？还是工作实例？Thx

calendarOptions对象有一个events属性，您可以在其中添加事件。只需尝试将其添加到AppComponent中

calendarOptions: CalendarOptions = {
  initialView: 'dayGridMonth',
  dateClick: this.handleDateClick.bind(this), // bind is important!
  events: [ // <= here
    { title: 'event 1', date: '2019-04-01' },
    { title: 'event 2', date: '2019-04-02' }
  ]
};

---

我需要从我的BD中恢复50个事件。你需要将数据处理为标题日期格式，并将其添加到事件数组中，例如so:this.calendaroptions.events.push{title:bla，date:…}你能做一个简短的示例吗？我刚刚添加了一些代码。

export class AppComponent implements OnInit {

  constructor(
    private vacationService: VacationService,
  ) {}

  ngOnInit(): void {
    this.loadEvents();
  }

   // references the #calendar in the template
   @ViewChild('calendar') calendarComponent: FullCalendarComponent;

  calendarOptions: CalendarOptions = {
    initialView: 'dayGridMonth',
    headerToolbar: { 
      left: '',
      center: 'title',
    },
    editable: true,   
  
  };

  loadEvents(): void {
      this.vacationService.getAll().subscribe((data) => {
        // My data
        console.log(data);
      })
  }
}

calendarOptions: CalendarOptions = {
  initialView: 'dayGridMonth',
  dateClick: this.handleDateClick.bind(this), // bind is important!
  events: [ // <= here
    { title: 'event 1', date: '2019-04-01' },
    { title: 'event 2', date: '2019-04-02' }
  ]
};

loadEvents(): void {
  this.vacationService.getAll().subscribe((data) => {
    this.calendarOptions.events = data.map(
      evt => {
        return { date: evt.date, title: evt.holidayGR.holiday }
      })
  })
}