Angular 19 中 FullCalendar 从自定义服务加载事件无法显示的问题求助
Angular 19 中 FullCalendar 从自定义服务加载事件无法显示的问题求助
大家好,我正在测试一个直接从FullCalendar GitHub仓库获取的Angular 19项目。demo里通过硬编码数组初始化事件的initializeEvents功能完全正常,但我现在需要从接口URL拉取数据来填充日历事件。
我尝试把服务返回的结果转换成EventAPI、EventInput等格式,控制台明明能看到服务返回的数据已经被构造成了正确的数组,但日历就是对这些事件毫无反应。如果有人能给我一些排查方向或解决建议,我会非常感激!
我的app-component中的options对象:
export class AppComponent { calendarVisible = signal(true); calendarOptions = signal<CalendarOptions>({ plugins: [ interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin, ], headerToolbar: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek' }, initialView: 'dayGridMonth', //initialEvents: INITIAL_EVENTS, // alternatively, use the `events` setting to fetch from a feed weekends: true, editable: true, selectable: true, selectMirror: true, dayMaxEvents: true, select: this.handleDateSelect.bind(this), eventClick: this.handleEventClick.bind(this), eventsSet: this.handleEvents.bind(this), /* you can update a remote database when these fire: eventAdd: eventChange: eventRemove: */ events: this.loadEvents.bind(this) }); constructor(private changeDetector: ChangeDetectorRef) { } ... }
同一个组件中的loadEvents函数:
async loadEvents(args: EventSourceFuncArg): Promise<EventInput[]> { return new Promise<EventInput[]>((resolve) =>{ console.log(args.startStr); this.eventService.getAllEvents().then((eventList: EventApi[]) => { const events: EventInput[] = []; eventList.forEach(function(val) { events.push({ id: val.id, title: val.title, start: formatDate(val.start as Date , "yyyy/MM/dd", 'en-US'), end: formatDate(val.end as Date , "yyyy/MM/dd", 'en-US'), allDay: val.allDay }); }); resolve(events); console.log(events); }); }); }
控制台输出的结果:
[ { "id": 1, "title": "event1", "start": "2025/04/03", "end": "2025/04/03" }, { "id": 2, "title": "event2", "start": "2025/04/03", "end": "2025/04/03" } ]
备注:内容来源于stack exchange,提问作者Enoch_Root
相关产品推荐
相关产品推荐

