Rails 7中Stimulus的Flatpickr与FullCalendar控制器通信问题求助

问题诊断 #

报错Cannot read properties of undefined (reading 'getControllerForElementAndIdentifier')的核心原因有两个：

• Flatpickr配置的onChange使用普通函数，导致**this指向flatpickr实例而非Stimulus控制器**，因此this.application和this.calendarTarget均未定义。
• Flatpickr控制器未正确声明或获取Calendar元素的引用，无法定位到目标控制器实例。

分步解决方案 #

1. 修正Flatpickr控制器的回调上下文与实例获取 #

修改flatpickr_controller.js，改用箭头函数绑定Stimulus控制器的this，同时正确获取Calendar控制器：

import Flatpickr from 'stimulus-flatpickr'

export default class extends Flatpickr {
  connect() {
    this.config = {
      inline: true,
      enableTime: false,
      time_24hr: false,
      // 箭头函数保留Stimulus控制器的this上下文
      onChange: (selectedDates, dateStr, instance) => {           
        // 获取Calendar控制器对应的DOM元素
        const calendarElement = document.querySelector('[data-controller="calendar"]')
        // 通过Stimulus应用实例获取Calendar控制器
        const calendarController = this.application.getControllerForElementAndIdentifier(calendarElement, "calendar")
        
        // 调用Calendar控制器的跳转方法，直接传入Flatpickr返回的Date对象
        calendarController.gotoDate(selectedDates[0])
      },
    };
    super.connect();
  }
}

2. 为Calendar控制器添加日期跳转方法 #

当前calendar_controller.js缺少跳转逻辑，补充gotoDate方法：

import { Controller } from "@hotwired/stimulus";
import { Calendar } from '@fullcalendar/core';
import resourceTimeGridPlugin from '@fullcalendar/resource-timegrid';
import interactionPlugin from '@fullcalendar/interaction';

export default class extends Controller {
  static targets = [ "popup", "window" ];

  connect() {
    let overlay = this.popupTarget;

    this.calendar = new Calendar(this.windowTarget, {
        plugins: [ resourceTimeGridPlugin, interactionPlugin ],
        themeSystem: 'bootstrap5',
        initialView: 'resourceTimeGridDay',
        aspectRatio:  1.8,
        nowIndicator: true,
        selectable: true,
        editable: true,
        allDaySlot: false,
    });

    // Stimulus connect钩子触发时DOM已就绪，无需监听window.load
    this.calendar.render();
  }

  refresh(e) {
    if (e.detail.success) {
      this.calendar.refetchEvents();
    }
  }

  // 新增日期跳转方法
  gotoDate(date) {
    this.calendar.gotoDate(date);
  }
}

3. 规范元素引用（可选优化） #

若想避免硬编码选择器，可给Calendar容器添加目标标记：

<div data-controller="flatpickr" name="" data-action=""></div>
<div data-controller="calendar" data-flatpickr-target="calendar">
 <div data-calendar-target="window"></div>
 <turbo-frame id="popup" data-calendar-target="popup"></turbo-frame>
</div>

然后在Flatpickr控制器中声明目标：

static targets = ["calendar"]

后续获取元素可直接用this.calendarTarget替代querySelector，代码更健壮。

额外注意事项 #

• FullCalendar的gotoDate支持Date对象、ISO字符串或标准格式日期串，直接传入Flatpickr返回的selectedDates[0]（原生Date对象）是最可靠的方式。
• 移除window.addEventListener('load', ...)，Stimulus的connect钩子触发时机晚于DOM加载完成，无需额外等待。

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