How to use JSComponent with FullCalendar

Panel
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