Topic: Node js calendar issues
Verlino priority asked 4 weeks ago
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.
Kamila Pieńkowska staff answered 4 weeks ago
Can you provide a snippet that replicate this behavior?
Verlino 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
- ForumUser: Priority
- 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