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.



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