You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.13 19:20:27