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

React FullCalendar v5:Event Sources用Promise无法显示事件

FullCalendar使用eventSources传入Promise后日程表为空的问题

为提升性能(尤其是交互性能),我尝试将FullCalendar组件改为使用eventSources,而非通过Promise.all批量调用API后传入事件数组。但问题在于,我的事件源是Promise,它确实返回了格式正确的事件数组,但FullCalendar日程表仍为空,我不清楚原因。

简化后的组件代码

<FullCalendar
    ref={calendarRef}
    schedulerLicenseKey={process.env.SCHEDULER_KEY}
    plugins={[resourceTimelinePlugin, interactionPlugin]}
    initialView='resourceTimelineMonth'
    locale="fr"
    timeZone="Europe/Paris"
    height="100%"
    headerToolbar={false}
    resources={filteredResources}
    eventSources={[
       {
          // 部分参数依赖React Hook状态
          events: satisfactionSourceEvents(planningType, filteredResources, horizon, draft, execId, parseInt(selectedSolution))
       }
    ]}
    nowIndicator
    slotDuration="24:00:00"
    eventClick={handleEventClick}
    slotLabelContent={HeaderContent}
    resourceLabelContent={renderResourceContent}
    eventContent={renderEventContent}
    dateClick={handleDateClick}
/>

satisfactionSourceEvents函数代码

function satisfactionSourceEvents(planningType: PlanningType, resources: GroupResource[], horizon: any, draft?: PlanningDraft, execId?: number, solId?: number): Promise<any[]>{

    let _serviceIds = resources.map(s => s.id)

    // 带多参数的API函数,返回timeline对象
    return TimelineAPI.getTimeline(planningType, planningType === "draft" ? draft.id : null, execId ?? null, solId ?? null, {
        serviceIds: _serviceIds.join(),
        start: horizon.from.format(DateISOFormat),
        end: horizon.to.format(DateISOFormat),
        "withDetail.shifts": true,
        "withResult.demandSatisfactionMeasuresByShift": true,
        "withResult.demandSatisfactionMeasuresGlobal": false,
    })
     // 返回符合FullCalendar格式的事件数组
    .then(timeline => getSatisfactionDemandTimelineAsFCEventObject(timeline.result.demandSatisfactionMeasuresByShift, timeline.detail))

}

打印的正确格式数据

events(事件数组)

[
   {"start": "2023-11-01T00:00:00","end": "2023-11-01T23:59:59",  "resourceId": "1_2"},
   {"start": "2023-11-02T00:00:00","end": "2023-11-02T23:59:59",  "resourceId": "1_2"},
   {"start": "2023-11-03T00:00:00","end": "2023-11-03T23:59:59",  "resourceId": "1_2"},
   ...
]

resources(资源数组)

[
  {
    "id": 2,
    "title": "Service 2",
    "resourceType": "SERVICE",
    "children": [
      {
        "id": "1_2",
        "title": "N7",
        "resourceType": "SHIFT",
      },
      {
        "id": "2_2",
        "title": "B12",
        "resourceType": "SHIFT",
      },
      ...
    ]
  }
]

API返回格式是正确的,因为格式未变,且改用eventSources之前能正常工作。请问是否可以在eventSources中使用Promise?

内容的提问来源于stack exchange,提问作者Minos

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.07.05 17:02:43