How to use JSComponent with FullCalendar

Panel
1

Looking at

What am I missing or is this a bug?

I get

react-dom.production.min.js:188 TypeError: Class constructor ee cannot be invoked without 'new'
    at oe.render (internal-common.js:2442:13)
    at O (index.js:197:13)
    at Q (children.js:137:3)
    at O (index.js:230:4)
    at Q (children.js:137:3)
    at O (index.js:230:4)
    at Q (children.js:137:3)
    at O (index.js:230:4)
    at Q (children.js:137:3)
    at ue (index.js:436:4)
ri @ react-dom.production.min.js:188

import panel as pn
from panel.custom import ReactComponent
pn.extension()

class SimpleFullCalendar(ReactComponent):
    _esm = """
    import FullCalendar from 'https://esm.sh/@fullcalendar/react@6.1.8';
    import dayGridPlugin from 'https://esm.sh/@fullcalendar/daygrid@6.1.8';

    export function render() {
        return (
            <FullCalendar
            plugins={[ dayGridPlugin ]}
            initialView="dayGridMonth"
            />
        )
    }
    """

    _stylesheets = [
        "https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.8/main.min.css",
        "https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@6.1.8/main.min.css",
    ]

calendar = SimpleFullCalendar()
calendar.show()
2

Do you get a better traceback with --dev? Strongly recommend using that when building components.

3

Unfortunately not terribly helpful

image
image1324×214 7.1 KB

image
image986×946 108 KB

4

Seems like at least the JSComponent works when specifying an importmap:

import panel as pn
from panel.custom import JSComponent
pn.extension()

class SimpleFullCalendar(JSComponent):
    _esm = """
     import { Calendar } from '@fullcalendar/core';
    import dayGridPlugin from '@fullcalendar/daygrid';

    export function render({ model, el }) {

      let calendar = new Calendar(el, {
        plugins: [ dayGridPlugin ]
        // options here
      });

      calendar.render()
    }
    """

    _importmap = {
        "imports": {
          "@fullcalendar/core": "https://cdn.skypack.dev/@fullcalendar/core@6.1.15",
          "@fullcalendar/daygrid": "https://cdn.skypack.dev/@fullcalendar/daygrid@6.1.15"
        }
    }

    _stylesheets = [
        "https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.8/main.min.css",
        "https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@6.1.8/main.min.css",
    ]

calendar = SimpleFullCalendar()
calendar.servable()
1 Like
5

Amazing!

6

React version works too, but I’d recommend sticking with the JSComponent where possible since React is not a small dependency.

7

Followed this example, Initialize with Script Tags (ESM) - Docs | FullCalendar

Now wondering if those esm.sh builds weren’t simply broken and it had nothing to do with the importmap.

8

Seems to be the case, something wrong with esm.sh here. Hadn’t seen that before.

9

Is it good practice to build Panel built-in components with JSComponent?

10

Yes. We could decide eventually building a React based bundle but there’d have to be a good reason.

1 Like
11

The implementation is starting here! Start adding full calendar by ahuang11 · Pull Request #7356 · holoviz/panel · GitHub

1 Like