Topic: Node js calendar issues
Verlino priority asked 1 month 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 3 weeks ago
If you do UMD import:
import * as mdb from 'js/mdb.umd.min.js';
remove ES import and init:import { Modal, initMDB } from 'js/mdb.es.min.js'; initMDB({ Modal });
Plugins and main MDB package should be imported in the separate tags.
Add
window.mdb = mdb
where you import mdb package and addwindow.Calendar = Calendar
where you import calendar.Remove
data-mdb-button-init
attribute - it is not needed for regular buttons
After doing all this steps let me know if you still get this problem.
Kamila Pieńkowska staff answered 1 month ago
Can you provide a snippet that replicate this behavior?
Verlino priority commented 1 month 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 1 month 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 3 weeks 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 3 weeks 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 3 weeks ago
Of course! I created a snippet for better comprension:
https://mdbootstrap.com/snippets/standard/verlino/6268812
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