Vue FullCalendar日期/事件点击事件无效问题排查

阿华AIGC实验室

2026-5-14

解决Vue版FullCalendar日期/事件点击无响应问题

咱们一步步拆解你的问题，先从代码里的几个关键错误入手：

1. Events数组的语法错误

你的events数组写法存在语法问题——数组里的事件对象缺少大括号包裹，这会直接触发JS语法错误，导致组件运行异常，自然无法触发任何点击事件。

错误写法：

events: [ title: 'My Event', start: '2010-01-01' ]

正确写法（给对象加上大括号）：

events: [{ title: 'My Event', start: '2010-01-01' }]

2. 事件绑定的命名规范问题

FullCalendar Vue组件的自定义事件采用**kebab-case（短横线分隔）**命名规则，虽然Vue模板支持驼峰式自动转换，但组件内部可能会严格监听原始的短横线命名事件。你需要把@dateClick改成@date-click才能正确触发日期点击。

同理，若要监听日历事件的点击，需要绑定@event-click事件。

3. 实现事件点击打开模态框的逻辑

要完成点击事件打开详情模态框的需求，你需要额外绑定@event-click事件，并在方法中处理模态框的显示和事件数据的传递。

完整修正后的代码示例

模板部分：

<full-calendar 
  @date-click="handleDateClick" 
  @event-click="handleEventClick"
  :config="config" 
  :events="events"
></full-calendar>

<!-- 示例模态框（你可以替换成自己的模态框组件） -->
<div v-if="showEventModal" class="modal">
  <div class="modal-content">
    <h3>{{ selectedEvent.title }}</h3>
    <p>开始时间：{{ selectedEvent.start }}</p>
    <button @click="showEventModal = false">关闭</button>
  </div>
</div>

Vue脚本部分：

export default {
  data() {
    return {
      events: [{
        title: 'My Event',
        start: '2010-01-01'
      }],
      config: {
        defaultView: 'month',
        editable: true,
        eventRender: function(event, element) {
          console.log(event)
        }
      },
      showEventModal: false,
      selectedEvent: null
    }
  },
  methods: {
    handleDateClick(arg) {
      alert(arg.date)
    },
    handleEventClick(arg) {
      // 保存点击的事件数据，打开模态框
      this.selectedEvent = arg.event
      this.showEventModal = true
      // 阻止默认的事件跳转行为（如果有）
      arg.jsEvent.preventDefault()
    }
  }
}