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

FullCalendar资源标题无法正常显示问题求助

FullCalendar资源标题显示为 问题排查求助

根据FullCalendar v5官方文档,只要提供包含id和title属性的JS对象数组,资源就应该正常显示。但我使用ResourceTimelineWeek视图时,出现了异常情况:

资源标题显示异常

可以看到资源已经存在于DOM中,ID值和数据库API返回的一致,但奇怪的是title显示成了 !

我一开始怀疑是数据库返回的数据有问题,但调试后确认数据是正常的:

数据库返回的数据

以下是我相关的代码实现:

映射数据库数据的函数

protected getResources(): ICalendarResourceInput[] {
    this.calendarResources = [];

    for (let i = 0; i < this.calendarResourceList.length; i++) {
        let calendarResource: RotaTemplateShiftCalendarResource = this.calendarResourceList[i];

        let resource: ICalendarResourceInput = {
            id: String(calendarResource.Id),
            title: calendarResource.Title,
        };

        this.calendarResources.push(resource);
    }

    return this.calendarResources;
}

日历选项中配置资源获取的逻辑

let resourceFunction: CalendarResourcesFunc = (args: CalendarResourceArgs, success: CalendarResourceSuccess, failure: CalendarResourceFailure) => {
    if (refreshResources) {
        // 重新填充列表
        this.calendarEventList = [];
        this.calendarResourceList = [];
        this.populateCalendarData(new Date("2001-01-01"), new Date("2001-12-31"));
    }
    refreshResources = true;
    this.fetchResourceForCalendar(args, success, failure);
};

options.resourceOrder = "displayOrder" as any;
options.resources = resourceFunction as any;

填充日历数据的函数

protected populateCalendarData(startDate: Date, thresholdDate: Date): void {
    let response: RotaTemplateShiftCalendarResponse = this.getRotaCalendarData(
        startDate,
        thresholdDate,
        RotaCalendarDataType.Staff,
        this.values.ouId);

    this.calendarResourceList = response.Resources;
    this.calendarEventList = response.Events;
}

获取日历资源的函数

protected fetchResourceForCalendar(args: CalendarResourceArgs, success: CalendarResourceSuccess, failure: CalendarResourceFailure) {
    success(this.getResources());
}

protected getResources(): ICalendarResourceInput[] {
    this.calendarResources = [];

    for (let i = 0; i < this.calendarResourceList.length; i++) {
        let calendarResource: RotaTemplateShiftCalendarResource = this.calendarResourceList[i];

        let resource: ICalendarResourceInput = {
            id: String(calendarResource.Id),
            title: calendarResource.Title,
        };

        this.calendarResources.push(resource);
    }

    return this.calendarResources;
}

现在我不确定还能尝试哪些方法来排查问题原因,希望能得到帮助。

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.07.22 18:45:21