FullCalendar unknown option 'dateClick'

Question

I have a rails 6 application and added FullCalendar by following the official docs(using yarn and webpacker)

When I run the server, the calendar displays correct and clicking on an event also works, but clicking on a date doesn't do anything. In the developer tools I get the message: Unknown option 'dateClick'.

My calendar.js looks like this:

  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();
  });

When I copy the code from node_modules/@fullcalendar/interaction/main.js and paste it in a different file and import it from there it works.

Answer 1

Problem was that @fullcalendar/core was installed with version 5.1.0 and @fullcalendar/interaction was installed with version 5.2.0.

Upgrading @fullcalendar/core to 5.2.0 solved the issue.