要在Angular 11中重新获取Fullcalendar V5中的事件,您可以使用Fullcalendar的事件钩子函数和Angular的服务来实现。下面是一个示例解决方案:
CalendarService
的Angular服务,用于处理与Fullcalendar相关的操作。在这个服务中,您可以定义一个getEvents()
方法,用于从后端获取事件数据。import { Injectable } from '@angular/core';
import { EventInput } from '@fullcalendar/core';
@Injectable({
providedIn: 'root'
})
export class CalendarService {
getEvents(): Promise {
// 发起HTTP请求或从其他地方获取事件数据
// 返回一个Promise对象,用于异步获取事件数据
return new Promise((resolve) => {
// 假设从后端获取事件数据
setTimeout(() => {
const events: EventInput[] = [
{
id: '1',
title: 'Event 1',
start: new Date(),
end: new Date()
},
{
id: '2',
title: 'Event 2',
start: new Date(),
end: new Date()
}
];
resolve(events);
}, 2000);
});
}
}
FullCalendar
组件,并在ngAfterViewInit
生命周期钩子中初始化Fullcalendar并获取事件数据。import { Component, AfterViewInit } from '@angular/core';
import { CalendarService } from './calendar.service';
import { EventInput } from '@fullcalendar/core';
@Component({
selector: 'app-calendar',
template: `
`
})
export class CalendarComponent implements AfterViewInit {
constructor(private calendarService: CalendarService) {}
ngAfterViewInit(): void {
this.calendarService.getEvents().then((events: EventInput[]) => {
const calendarEl = document.getElementById('calendar');
const calendar = new FullCalendar.Calendar(calendarEl, {
events: events,
// 其他Fullcalendar配置项
});
calendar.render();
});
}
}
在这个示例中,CalendarComponent
组件通过CalendarService
服务获取事件数据,并在ngAfterViewInit
生命周期钩子中初始化Fullcalendar实例。
当事件从后端更改时,您可以调用getEvents()
方法来重新获取事件数据,并使用refetchEvents()
或rerenderEvents()
方法来刷新Fullcalendar的事件显示。
希望这个示例能帮助到您!