Angular中使用events函数加载FullCalendar数据库事件的异步问题

安全阿岳

2026-7-27

解决FullCalendar通过异步请求加载初始事件的问题

问题根源

你的LoadEvents函数里，http.get是异步操作，subscribe内的逻辑要等请求完成才会执行，但你直接在函数末尾返回了空的events数组——这时候请求还没结束，数组自然是空的。另外你标记了函数为async，但没有实际等待异步操作完成就返回了结果。

解决方案

1. 修正`LoadEvents`函数，等待HTTP请求完成后返回结果

用RxJS的firstValueFrom（RxJS 7+推荐）把Observable转换成Promise，再通过await等待请求完成，处理完数据后再返回：

import { firstValueFrom } from 'rxjs'; // 记得导入该方法

async LoadEvents(date: string): Promise<EventInput[]> {
  // 等待HTTP请求完成，获取后端返回的事件数据
  const result = await firstValueFrom(
    http.get<CalendarEvent[]>(getBaseUrl() + 'calendarevent')
  );

  // 转换为FullCalendar需要的EventInput格式并返回
  return result.map(val => ({
    id: val.id,
    title: val.title,
    start: val.date
  }));
}

如果你使用的是RxJS 7以下版本，可以用toPromise()替代firstValueFrom，但toPromise已被废弃，建议升级RxJS版本。

2. 优化calendarOptions中的events回调

由于LoadEvents现在返回Promise，你可以用async/await简化回调逻辑，同时注意绑定this以确保能调用到LoadEvents方法：

calendarOptions: CalendarOptions = {
  plugins: [timeGridPlugin, interactionPlugin],
  initialView: 'timeGridDay',
  editable: true,
  selectable: true,
  select: this.handleDateSelect.bind(this),
  eventClick: this.handleEventClick.bind(this),
  eventsSet: this.handleEvents.bind(this),

  events: async function(fetchInfo, successCallback) {
    try {
      const returnEvents = await this.LoadEvents(fetchInfo.startStr);
      console.log(returnEvents);
      successCallback(returnEvents);
    } catch (error) {
      console.log(error);
    }
  }.bind(this)
};