FullCalendar未知选项'dateClick‘

Question

我有一个Rails6应用程序，并通过遵循official docs(使用yarn和webpacker)添加了FullCalendar。

当我运行服务器时，日历显示正确，单击事件也可以，但单击日期不起作用。在开发人员工具中，我得到的消息是:未知选项'dateClick‘。

我的calendar.js看起来像这样：

  import { Calendar } from "@fullcalendar/core";

  import dayGridPlugin from "@fullcalendar/daygrid";

  import timeGridPlugin from "@fullcalendar/timegrid";

  import listPlugin from "@fullcalendar/list";

  import interactionPlugin from "@fullcalendar/interaction";

  import bootstrapPlugin from "@fullcalendar/bootstrap";

  import nlLocale from "@fullcalendar/core/locales/nl";

  document.addEventListener("DOMContentLoaded", function() {
    const calendarEl = document.getElementById("calendar");

    const calendar = new Calendar(calendarEl, {
      plugins: [
        dayGridPlugin,
        timeGridPlugin,
        listPlugin,
        interactionPlugin,
        bootstrapPlugin
      ],
      themeSystem: "bootstrap",
      initialView: "dayGridMonth",
      eventClick(info) {
        console.log("Event clicked")
      },
      dateClick(info) {
        console.log("Date clicked")
      }
    });
    calendar.render();
  });

当我从node_modules/@fullcalendar/interaction/main.js复制代码并将其粘贴到另一个文件中，然后从那里导入它时，它可以正常工作。

Answer 1

问题是@fullcalendar/core与版本5.1.0一起安装，而@fullcalendar/interaction与版本5.2.0一起安装。

将@fullcalendar/core升级到5.2.0解决了这个问题。

Answer 2

你试过了吗？

 eventClick: function(info) {

和

 dateClick: function(info) {

而不是

eventClick(info) {
...
dateClick(info) {

Answer 3

如果有人在实现FullCalendar的dateClick时遇到此错误。我使用5.6版本解决了这个问题。所有包必须具有相同的版本

npm install @fullcalendar/daygrid@5.6
npm install @fullcalendar/interaction@5.6
npm install @fullcalendar/vue@5.6