Rails 6中如何在js.erb文件中引用calendar.js的FullCalendar实例变量

• 你在calendar.js中定义的FullCalendar实例是turbolinks:load回调函数内的局部变量，仅回调内部可访问，全局执行的destroy.js.erb无法直接获取该实例
• 你之前通过document.getElementById('calendar')获取到的是DOM元素对象，不是FullCalendar实例对象，自然不存在getEventById这类日历实例专属方法
• 你重命名实例变量后仍报未定义错误，原因和变量名称无关，本质还是局部变量无法被全局作用域访问

核心逻辑是把FullCalendar实例挂载到可全局访问的位置，这里推荐更稳妥的DOM挂载方案（不会污染全局变量空间）：

步骤1：修改calendar.js，挂载实例到DOM元素 #

在日历渲染前，将生成的FullCalendar实例挂载到对应的DOM元素属性上：

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';

document.addEventListener("turbolinks:load", () => {
    var calendarEl = document.getElementById('calendar');

    var calendar = new Calendar(calendarEl, {
        plugins: [dayGridPlugin, interactionPlugin],
        selectable: true,
        editable: true,
        events: "/calendar_events.json",
        eventClick: function (info) {
            $.getScript(info.event.extendedProps.edit_url, function () { });
        },
    });
    // 新增：将日历实例挂载到DOM元素的自定义属性上
    calendarEl.calendarInstance = calendar;
    calendar.render();
});

步骤2：修改destroy.js.erb，正确获取日历实例 #

从DOM元素的自定义属性上取出之前挂载的FullCalendar实例再调用API：

const calendarEl = document.getElementById('calendar');
const calendar = calendarEl.calendarInstance;
const targetEvent = calendar.getEventById(<%= @calendar_event.id %>);
// 增加判空逻辑，避免事件不存在时抛出报错
if (targetEvent) {
  targetEvent.remove();
}

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