FullCalendar v5如何获取日历JS实例调用getEvents()获取所有事件

报错本质是把原生DOM元素当成了FullCalendar日历实例调用方法，两种方式可以拿到正确的实例：

• 快速修复：直接从DOM元素取内置绑定的实例
  FullCalendar渲染完成后，会自动在根DOM节点上挂载_fullCalendar属性，对应初始化生成的日历实例，直接读取即可调用所有官方实例方法：

// 按钮点击逻辑
document.querySelector('#submit-events').addEventListener('click', () => {
  const calendarDom = document.getElementById('calendar');
  // 获取绑定的实例
  const calendar = calendarDom._fullCalendar;
  // 正常调用getEvents
  const eventList = calendar.getEvents();
  // 后续处理事件提交逻辑
})

注意要等日历初始化渲染完成后再调用，否则会拿到空值。

• 推荐写法：初始化时缓存实例到可访问作用域
  上面的_fullCalendar是框架内部属性，没有写在公开文档里，版本迭代可能有变动，更稳妥的方式是初始化时就把实例存在外层作用域，后续直接调用：

// 外层声明变量存储实例
let calendar = null;

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  // 初始化赋值
  calendar = new FullCalendar.Calendar(calendarEl, {
    // 原有配置全部保持不变即可
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    initialDate: '2020-09-12',
    navLinks: true,
    selectable: true,
    selectMirror: true,
    select: function(arg) {
      var title = prompt('Event Title:');
      if (title) {
        calendar.addEvent({
          title: title,
          start: arg.start,
          end: arg.end,
          allDay: arg.allDay
        })
      }
      calendar.unselect()
    },
    eventClick: function(arg) {
      if (confirm('Are you sure you want to delete this event?')) {
        arg.event.remove()
      }
    },
    editable: true,
    dayMaxEvents: true,
    events: [
      // 原有初始化事件数组保持不变
    ]
  });
  calendar.render();
});

// 后续提交逻辑直接使用缓存的实例
document.querySelector('#submit-events').addEventListener('click', () => {
  if (!calendar) return;
  const allEvents = calendar.getEvents();
  // 提取需要提交的字段，不要直接传原始事件对象
  const submitData = allEvents.map(event => ({
    id: event.id,
    title: event.title,
    start: event.start.toISOString(),
    end: event.end ? event.end.toISOString() : null,
    allDay: event.allDay
  }));
  // 调用接口把submitData提交到数据库即可
})

提示：getEvents()返回的是FullCalendar封装的事件对象，包含大量内部方法和属性，提交到后端前记得手动提取需要的业务字段，时间值建议转成ISO字符串格式方便后端解析。

内容的提问来源于stack exchange，提问作者4bdl