Full Calendar NPM Plugin

[Seun]

Hi everyone, i am trying to initialize the full calendar NPM plugin in my weweb project but it is not workiung. Please has anyone ever done this before and what was the workflow like?

[jptrinh]

Hey @Seun

I can initialize it but the integration feel very limited. And would be code-heavy.

1. After installing the librairy with the NPM Plugin
   
2. Add a custom JS onMounted event of the targeted div
   
   

  var calendarEl = context.thisInstance.querySelector("div");

  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    initialDate: '2024-07-07',
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    events: [
      {
        title: 'Long Event',
        start: '2024-07-07',
        end: '2024-07-10'
      }
    ]
  });

  calendar.render();

That being said, my take would be to try and reproduct the desired design with the integrated calendar that WeWeb offers. Or try a custom component integration?
We planned to improve this integration in the future to allow for more customization! No ETA yet, as there are other tickets that needs to be done to achieve that.

[Seun]

I did the exact thing, but this is what i am getting.

Also does it mean that i can’t pass data to the calendar from my weweb data store?

[FHEXL]

@Seun Make the div auto height.

@jptrinh But my issue is that, it shows in edit mode, but is not shown when I preview in the editor.

@raydeck I also tried to follow the docs of Fullcalendar and some codepen examples i combination with your weweb embed tool. But did not succeed. Is it possible to add fullCalendar with help of your tool?

[raydeck]

A State Change member got fullcalendar rolling several months ago in WW, so yes it should be possible. You’ll find that these plugins often require a bit more work than the simple demos from the vendor’s “getting started” page on account of fitting it in the way that WW requires. That said, we just had a session today in office hours where we did just that with a different plugin. We used weweb-embed for loading the script tag and a style tag for the popup in this particular plugin, and custom JS component for loading the JS code. We broke it down and got it going in office hours in about 20m. That wasn’t FC specifically, but it gives you an idea of the work involved.

[danlopes]

Hi @FHEXL

When our AI features are released, you will be able to generate any type of calendar very easily, using full calendar or not. I’ve just generated one with one prompt and the results are great!

Have you checked the height of your calendar? Try a fixed height.

[yma]

will be taking screenshots to generate my ideas ?

[danlopes]

@yma yes, 100%. Just upload a screenshot of your design and the AI will generate everything.

[FHEXL]

Just one prompt to generate a full calendar based component? That’s cool. Do you have a timeline for this feature?

[danlopes]

January, you will all love this!

[FHEXL]

Tested it a bit. Having the NPM plugin of FC v6.1.15 Rendering the calendar using a weweb div element is not working, but rendering it using a html element with a clean <div id="calendar>. Does work. Something is interfering.