Angular 10 FullCalendar Rest Api 没有 jQuery

如何解决Angular 10 FullCalendar Rest Api 没有 jQuery

如何将事件放入日历？

HTML

<full-calendar #calendar [options]="calendarOptions"></full-calendar>

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);
      })
  }
}

这是我的 Api 响应

(1) [{…}] 0：日期：“2018-03-29T13:34:00.000+0200” 假期GR：{id：21，假期：“第一次活动”} 编号：7 原型：对象

有什么帮助吗？或工作示例？谢谢

解决方法

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' }
  ]
};

复制自 FullCalendar Docs 无需访问 @ViewChild 即可更改事件

您的加载事件可能如下所示。我不知道你的数据是如何定义的。

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