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


  1. 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 });

  2. Plugins and main MDB package should be imported in the separate tags.

  3. Add window.mdb = mdb where you import mdb package and add window.Calendar = Calendar where you import calendar.

  4. Remove data-mdb-button-initattribute - 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



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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