Fullcalendar 5自定义视图无法触发eventClick事件问题咨询

你当前自定义视图的content方法直接返回静态HTML字符串，没有为事件元素绑定FullCalendar内置的事件监听逻辑，因此全局配置的eventClick不会自动触发。你可以改用DOM节点生成视图+主动触发事件的方式实现需求，修改后的自定义视图代码如下：

import { sliceEvents, createPlugin } from '@fullcalendar/core'

const CustomViewConfig = {
  classNames: ['list-view'],
  duration: {
    month: 1.5
  },
  buttonText: 'Planning',

  content (props, element) {
    // 创建根容器
    const container = document.createElement('div')
    container.className = 'row'
    const events = sliceEvents(props, false)

    events.forEach(event => {
      // 创建单个事件元素
      const eventEl = document.createElement('div')
      eventEl.className = `col-12 col-md-6 event color-${event.def.sourceId}`
      // 填充事件内部内容
      eventEl.innerHTML = `
            <div class="row mb-4">
                <div class="col-4">
                    <div class="col-date">
                        <span>${event.range.start.getDate()} ${event.range.start.toLocaleString('default', { month: 'long' })}</span>
                        <span>${event.range.end.getDate()} ${event.range.end.toLocaleString('default', { month: 'long' })}</span>
                    </div>
                </div>
                <div class="col-8">
                  <div class="col-content">
                      ${event.def.title}
                  </div>
                </div>
            </div>
      `
      // 绑定点击事件，触发全局配置的eventClick
      eventEl.addEventListener('click', (jsEvent) => {
        props.calendar.trigger('eventClick', {
          event: event,
          el: eventEl,
          view: props.view,
          jsEvent: jsEvent
        })
      })

      container.appendChild(eventEl)
    })

    // 返回DOM节点数组替代原有的HTML字符串
    return { domNodes: [container] }
  }
}

export default createPlugin({
  views: {
    custom: CustomViewConfig
  }
});

修改完成后，你原先配置的eventClick: (info) => this.displayDetail(info)不需要做任何调整，即可在自定义视图下正常触发。

内容的提问来源于stack exchange，提问作者Simon Ackermann