fullcalendar scheduler @5.7.0 未找到resourceClick资源点击事件解决方案问询

FullCalendar Scheduler v5.7.0 原生支持资源项点击回调，对应配置项为resourceClick，具体使用方法如下：

• 基础使用逻辑：在日历初始化配置中直接声明resourceClick回调函数，触发时会返回点击资源的全量信息，可直接基于返回参数开发业务逻辑。

原生JS使用示例 #

import { Calendar } from '@fullcalendar/core';
import resourceTimelinePlugin from '@fullcalendar/resource-timeline';

const calendarEl = document.getElementById('calendar');
const calendar = new Calendar(calendarEl, {
  plugins: [resourceTimelinePlugin],
  schedulerLicenseKey: '按实际授权情况填写',
  resources: [
    { id: 'r1', title: '会议室1', capacity: 10 },
    { id: 'r2', title: '会议室2', capacity: 15 }
  ],
  // 资源点击回调配置
  resourceClick: function(info) {
    // 获取资源属性
    console.log('资源ID：', info.resource.id);
    console.log('资源名称：', info.resource.title);
    console.log('资源自定义属性：', info.resource.extendedProps);
    // 获取原生点击事件，可按需阻止默认行为/冒泡
    console.log('原生点击事件：', info.jsEvent);
  }
});

calendar.render();

• 回调核心参数说明：
  • info.resource：被点击的资源实例，可获取所有配置的资源字段，自定义扩展属性存放在extendedProps对象中
  • info.jsEvent：浏览器原生点击事件对象，可调用preventDefault()阻止默认的资源选中等行为
  • info.view：当前日历视图实例

框架封装版本使用方式 #

如果使用Vue/React等框架的封装版本，直接将resourceClick作为组件属性传入即可，以React为例：

import FullCalendar from '@fullcalendar/react';
import resourceTimelinePlugin from '@fullcalendar/resource-timeline';

function CalendarComponent() {
  const handleResourceClick = (info) => {
    // 业务逻辑处理
    console.log('点击的资源：', info.resource);
  }

  return (
    <FullCalendar
      plugins={[resourceTimelinePlugin]}
      resources={[]}
      resourceClick={handleResourceClick}
      {/* 其他配置项 */}
    />
  )
}

常见问题排查 #

如果配置后点击未触发，可优先排查两个场景：

• 确认当前依赖的@fullcalendar/scheduler版本确实为5.x系列，4.x及更早版本的资源点击API存在差异
• 排查是否有自定义样式或全局事件拦截了资源列表区域的点击事件冒泡

内容的提问来源于stack exchange，提问作者Archi WebSoft