Hi, I have the Advanced version of React 5, as I'm using React and want to use plugins. However, I'm struggling to get them to work.

In my package.json, I have "mdb-calendar" installed from "/mdb/standard/plugins/prd/calendar" (as I believe the React version is not yet ready), and for the kit, I have "mdb-react-ui-kit" from "/mdb/react/mdb5/prd/mdb5-react-ui-kit-pro-essential". Not sure if that's the correct setup or not though.

In my React app, I'm trying to add the calendar, and I tried everything I could think of. The following code displays the calendar:

import React, { Component } from "react";

import Calendar from "mdb-calendar";

import * as mdb from "mdb-react-ui-kit"; // importing doesn't seem to help

import { MDBContainer } from "mdb-react-ui-kit";

const events = [
  {
    summary: "JS Conference",
    start: {
      date: Calendar.moment.format("DD/MM/YYYY"),
    },
    end: {
      date: Calendar.moment.format("DD/MM/YYYY"),
    },
    color: {
      background: "#1266F1",
      foreground: "white",
    },
  },
];

class CalendarContainer extends Component {
  componentDidMount() {
    window.mdb = mdb;
    const calendarElement = document.querySelector(".calendar");
    const calendarInstance = new Calendar(calendarElement);
    calendarInstance.next();
    calendarInstance.addEvents(events);
  }

  render() {
    return (
      <MDBContainer breakpoint="xxl">
        <div className="calendar mt-5" id="calendar"></div>
      </MDBContainer>
    );
  }
}

export default CalendarContainer;

However, the events are not displayed and clicking on anything causes an error:

TypeError: mdb.Modal is not a constructor
value
D:/Programming/x/node_modules/mdb-calendar/js/calendar.min.js:274

The issue seems to happen in componentDidMount() when I try to add events or the events get actioned.

componentDidMount
D:/Programming/x/src/components/main/calendar.js:31

  28 |    const calendarElement = document.querySelector(".calendar");
  29 |    const calendarInstance = new Calendar(calendarElement);
  30 |    calendarInstance.next();
> 31 |    calendarInstance.addEvents(events);
     | ^  32 |  }
  33 | 
  34 |  render() {

I tried a few different things, including starting an app from scratch just for the calendar, but still having no luck.

Can you please confirm if it's possible to make use of the calendar while using the MDB 5 React version? Please note, I'm interested in using multiple plugins in my current project, including WYSWIG, Drag and Drop, File Upload etc, so it's not just about the calendar.

Thanks for your help, Lukasz