FullCalendar Element

[frankvp11]

Question

I've been trying to use the FullCalendar element, and I was originally using it from here. The repo owner was kind enough to help me integrate one of the plugins that I wanted. You'll probably also notice that I'm looking to integrate the rrule package aswell. However upon testing it now it seems that it doesn't work. Namely, upon pressing the buttons, it gives me this error:

vue.global.prod.js:5 TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'PointerEvent'
    --- property 'nativeEvent' closes the circle
    at JSON.stringify (<anonymous>)
    at nicegui.js:108:22
    at Array.forEach (<anonymous>)
    at stringifyEventArgs (nicegui.js:88:8)
    at emitter (nicegui.js:190:19)
    at delayed_emitter (nicegui.js:193:37)
    at throttle (nicegui.js:117:5)
    at handler (nicegui.js:196:9)
    at n.<computed>.n.<computed> (vue.global.prod.js:9:16314)
    at vue.global.prod.js:5:73179

This is problematic, and I feel that it would be harder to try to fix that than to just start from fresh.
However, I'm running into issues there aswell. The new documentation and examples from the JS dependencies PR are very useful, however I'm still running into issues getting the barebones running.
To start, I've first installed all the NPM packages using this command:

npm install @fullcalendar/core @fullcalendar/interaction @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/list @fullcalendar/multimonth @fullcalendar/google-calendar @fullcalendar/icalendar @fullcalendar/rrule

I believe this is all of the plugins that there are.
I then tried creating the respective fullcalendar.js and fullcalendar.py files (attached below), but those generate this error:
Uncaught TypeError: Failed to resolve module specifier "@fullcalendar/core". Relative references must start with either "/", "./", or "../".

fullcalendar.js

import {FullCalendar } from "@fullcalendar/core"

export default {
    template: '<div></div>',
    props: {
        options: Array
    },
    mounted() {
        this.$calendar = $(this.$el);
        this.$calendar.FullCalendar(this.options);
    },

}

fullcalendar.py

from nicegui import ui

class FullCalendar(ui.element, component="fullcalendar.js", dependencies=["node_modules/@fullcalendar/core/index.global.js"]):
    def __init__(self, options):
        super().__init__()
        self._props["options"] = options

I would greatly appreciate help in debugging this. Even just getting a baseline would probably put me on my way

[falkoschindler]

Hi @frankvp11,

To be honest, NPM is one of my weak spots. So can only throw in a few random thoughts:

1. If JavaScript expects a relative path, have you tried something like import {FullCalendar } from "./@fullcalendar/core" or import {FullCalendar } from "./node_modules/@fullcalendar/core"?
2. The import import {FullCalendar } from "@fullcalendar/core" looks like an import that needs to be resolved by a bundler. Expressions like @fullcalendar usually denote packages in node_modules and the bundler will resolve individual JavaScript files.
3. I recommend looking into our "Node Module Integration" example (once again). This is what I ended up with when I tried to integrate a module which is based on multiple other node modules.