Vue.js使用FullCalendar调用addEvent报Cannot read properties of undefined错误

数据老陈

2026-9-26

错误原因

你通过document.getElementById获取到的是原生DOM节点，并非FullCalendar的Vue组件实例，自然无法访问FullCalendar提供的addEvent方法，触发属性读取失败报错。

解决步骤

1. 给FullCalendar组件绑定ref引用

修改模板代码，替换原来的id属性，用Vue的ref标识组件：

<FullCalendar 
  ref="calendarRef"
  :options="calendarOptions"
/>
</section>

2. 修正newEvent方法中获取实例的逻辑

通过this.$refs拿到FullCalendar组件实例后，调用getApi()方法获取日历核心实例，再调用addEvent方法：

methods:{
  newEvent(){
    // 推荐优化：表单值通过v-model绑定到data属性，不要用原生DOM获取，此处保留你原逻辑仅修改核心调用部分
    var eventName = document.getElementById("Ename").value;
    var sDate = document.getElementById("startDate").value;
    var eDate = document.getElementById("endDate").value;
    var type = document.getElementById("bookingType").value;
    var number = document.getElementById("numberOfPeople").value;
    
    // 正确获取FullCalendar实例
    const calendarApi = this.$refs.calendarRef.getApi()
    // 调用addEvent新增日程，自定义属性可直接写入事件对象中
    calendarApi.addEvent({
      title: eventName,
      start: sDate,
      end: eDate,
      allDay: true,
      type: type,
      numberOfPeople: number
    });
    alert('操作成功，请更新后端数据库...');
  }
}