Vue FullCalendar resource timegrid运行报错resourceOrder undefined问题求助

数据老陈

2026-10-14

问题原因

该报错指向FullCalendar的ResourceDayTimeColsView视图渲染时，无法读取到resourceOrder对应的配置上下文，90%以上的场景是resource相关插件未正确注册、或者resource配置项初始化异常导致的。

解决步骤

检查插件注册完整度
使用resource timegrid功能必须在calendarOptions.plugins数组中同时注册以下依赖：
@fullcalendar/resource-common、@fullcalendar/resource-timegrid，同时确保基础视图插件@fullcalendar/timegrid也已正常注册，缺少resource-common是触发该报错的最常见原因。
检查resources参数初始值
即使还未执行事件/资源的API加载逻辑，也必须给calendarOptions.resources设置初始空数组[]，不能保留为undefined或null，否则视图初始化时就会读取不到资源配置触发报错。
检查视图名称配置
确认你使用的资源视图名称拼写正确，资源类视图必须带resource前缀：比如resourceTimeGridDay、resourceTimeGridWeek，如果错误配置为不带前缀的timeGridDay，同时又传入了资源相关参数，也会触发该异常。
检查依赖版本一致性
所有@fullcalendar/开头的依赖包版本必须完全一致，哪怕小版本号不一致也会导致内部属性兼容问题，触发此类异常。

相关参考内容

组件使用代码：

<FullCalendar  :options="calendarOptions">
    <template v-slot:eventContent='arg' v-bind:style="{ 'background-color': arg.event.backgroundColor }">
        <div class="event-wrapper" v-bind:style="{ 'background-color': arg.event.backgroundColor }" v-bind:class="{'pastEvent': arg.isPast}">
            <b>{{ arg.timeText }}</b>
            <span>{{ arg.event.title }}</span> 
            <i class="forms-icon fas fa-file-signature" v-bind:class="linkedFormsClass(arg.event)" 
                v-if="arg.event.eventLinkedFormGroups != null && arg.event.eventLinkedFormGroups.length > 0"></i>
        </div>
    </template>
</FullCalendar>

日历配置项截图：