Angular 10 FullCalendar 休息 Api 否 jQuery

Question

如何将活动放入日历中？

HTML

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

TS

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” holidayGR：{id：21，假期：“第一个事件”} 编号：7 原型：对象

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

Answer 1

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

Angular 10 FullCalendar 休息 Api 否 jQuery

Angular 10 FullCalendar Rest Api No jQuery

angular

fullcalendar

fullcalendar-4