Node js calendar issues

Verlino pro premium 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 pro premium 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 pro premium priority commented 2 months ago

Of course! I created a snippet for better comprension:

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