Angular环境下FullCalendar资源点击事件触发实现方法咨询

常规实现（适用FullCalendar v5及以上版本） #

FullCalendar Angular封装包原生提供了资源点击的回调配置，不需要额外做DOM监听，按以下步骤配置即可：

• 首先安装必需依赖：资源类视图需要额外安装@fullcalendar/resource相关包，如果你用的是资源时间线视图，还需要安装@fullcalendar/resource-timeline
• 在组件TS文件中配置回调函数：

import { Component } from '@angular/core';
import { CalendarOptions } from '@fullcalendar/angular';
import { ResourceClickArg } from '@fullcalendar/resource';
import ResourceTimelinePlugin from '@fullcalendar/resource-timeline';

@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html'
})
export class CalendarComponent {
  calendarOptions: CalendarOptions = {
    plugins: [ResourceTimelinePlugin],
    initialView: 'resourceTimelineWeek',
    resources: [
      // 你的资源列表配置
      { id: '1', title: '资源1' },
      { id: '2', title: '资源2' }
    ],
    // 核心配置：绑定资源点击事件回调
    resourceClick: this.handleResourceClick.bind(this)
  };

  handleResourceClick(arg: ResourceClickArg) {
    // arg.resource 包含了点击资源的全部配置信息
    const resourceId = arg.resource.id;
    const resourceTitle = arg.resource.title;
    // 在这里编写你需要触发的业务逻辑即可
    console.log(`点击了资源：${resourceTitle}，ID为${resourceId}`);
  }
}

• 模板文件不需要额外修改，只要正常绑定配置即可：

<full-calendar [options]="calendarOptions"></full-calendar>

低版本兼容方案 #

如果你使用的FullCalendar版本低于v5，没有提供resourceClick原生回调，可以通过资源渲染钩子手动绑定点击事件：

calendarOptions: CalendarOptions = {
  // 其他原有配置保持不变
  resourceRender: (renderInfo) => {
    // 给渲染后的资源项DOM绑定点击事件
    renderInfo.el.addEventListener('click', () => {
      const resource = renderInfo.resource;
      // 处理业务逻辑
    })
  }
}

注意：如果出现点击事件不触发的情况，优先检查是否已正确引入资源类插件，或者是否有上层DOM阻止了点击事件冒泡

内容的提问来源于stack exchange，提问作者Ben Howard