Topic: Node js calendar issues
Expected behavior
Open calendar window like the basic example, in a modal, and manage events insertion, update and delete.
Actual behavior
When I open the modal I can see correctrly loaded calendar with some basic events inserted via javascript exactly like the basic example. But when I try to insert a new one or update/delete an old event nothing appens. If I go to inspect browser console I can see a lot of errors like above code:
Resources (screenshots, code snippets etc.)
x Uncaught TypeError: instance.update is not a function at mdb.es.min.js:23899:18 at Array.forEach () at mdb.es.min.js:23894:63 at handler (mdb.es.min.js:248:16) 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 HTMLDivElement.handler (mdb.es.min.js:763:5) at triggerTransitionEnd (mdb.es.min.js:666:12) at mdb.es.min.js:768:7
x 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 HTMLDivElement.handler (mdb.es.min.js:763:5) at triggerTransitionEnd (mdb.es.min.js:666:12) at mdb.es.min.js:768:7
14 mdb.es.min.js:1721 Uncaught RangeError: Maximum call stack size exceeded. 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) 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)
As you can see there are a lot of errors, first two are generated immediatly after the calendar is initializated. Any ideas? Thank you.
Can you provide a snippet that replicate this behavior?
Verlino pro premium priority commented 3 weeks 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 weeks 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.3.2
- Device: PC
- Browser: Chromium
- OS: Windows
- Provided sample code: No
- Provided link: No