Verlino priority commented 3 months ago

https://mdbootstrap.com/snippets/standard/verlino/6239295

I was able to notice when creating the snippet that it is probably an import problem, since it seems to work in the snippet. Consider that in my code I use separate javascript and the js code to insert events into the calendar is a module that first initializes the modal and onclick of the button, loads the events in the calendar and shows the modal with .show() I use this code to import the plugin and modal management, but in my environment of Electron-vite it is not the correct way to import my package...

// IMPORTING MDB KIT ES JS PACKAGE import { Modal, initMDB } from '../../../../node_modules/mdb-ui-kit/js/mdb.es.min.js'; initMDB({ Modal });

// IMPORTING MDB CALENDAR JS PACKAGE import * as mdb from '../../../../node_modules/mdb-ui-kit/js/mdb.umd.min.js'; // lib const Calendar = require('../../../node_modules/mdb-calendar/js/calendar.min.js');

Kamila Pieńkowska staff commented 3 months ago

We do not recommend using plugins with es modules.

If you want to o this anyway you have to tweak import syntax so modal and other components needed for Calendar will be imported as part of mdb object e.g. mdb.Modal.

Verlino priority commented 2 months ago

Ok now I'm using it as common js and it works normally. But now I have another problem: I need to use the calendar inside a Modal. I can create the instance and load it with events, but when I click on the calendar to insert a new event or to update an existing one I receive those errors:

chart.es.min.js:15020 Uncaught TypeError: instance.update is not a function at chart.es.min.js:15020:18 at Array.forEach () at chart.es.min.js:15015:63 at handler (chart.es.min.js:13559:15) at Object.trigger (mdb.es.min.js:1007:16) at transitionComplete (mdb.es.min.js:21806:20) at execute (mdb.es.min.js:747:51) at executeAfterTransition (mdb.es.min.js:751:5) at Modal2._queueCallback (mdb.es.min.js:1143:5) at Modal2._showElement (mdb.es.min.js:21810:10)

and

mdb.umd.min.js:20 Uncaught RangeError: Maximum call stack size exceeded. at ne._handleFocusin (mdb.umd.min.js:20:23286) at HTMLDocument. (mdb.umd.min.js:20:22900) at HTMLDocument.i (mdb.umd.min.js:20:11325) at FocusTrap._handleFocusin (mdb.es.min.js:1721:19) at HTMLDocument. (mdb.es.min.js:1698:64) at HTMLDocument.handler (mdb.es.min.js:856:16) at ne._handleFocusin (mdb.umd.min.js:20:23286) at HTMLDocument. (mdb.umd.min.js:20:22900) at HTMLDocument.i (mdb.umd.min.js:20:11325) at FocusTrap._handleFocusin (mdb.es.min.js:1721:19)

I think the problem is precisely the use of the modal, somehow I find problems with excessive references or other things like that...

Thank you for the answer!

Kamila Pieńkowska staff commented 2 months ago

Can you provide the code (HTML and JS) that leads to this error? I'm unable to troubleshoot the issue based solely on the error message.

Verlino priority commented 2 months ago

Of course! I created a snippet for better comprension:

https://mdbootstrap.com/snippets/standard/verlino/6268812