Angular 10 FullCalendar 休息 Api 否 jQuery
Angular 10 FullCalendar Rest Api No jQuery
如何将活动放入日历中?
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
原型:对象
有什么帮助吗?或工作示例?谢谢
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 }
})
})
}
如何将活动放入日历中?
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 原型:对象
有什么帮助吗?或工作示例?谢谢
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 }
})
})
}