Giters

trailheadapps / lwc-recipes

A collection of easy-to-digest code examples for Lightning Web Components on Salesforce Platform

Home Page:https://developer.salesforce.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Working example for Fullcalendar v6

JeroenSfdc opened this issue · comments

commented

Summary

Where the provided example for FullCalendar v5 is great; there does not seem to be a working path/solution to work with the latest reincarnation of FullCalendar which again brought architectural changes. Re-implementing the same fix (window.FullCalendar = ... vs var FullCalendar = ... on the provided library) does not seem to be enough. Also v6 no longer provides separate .css.

https://fullcalendar.io/docs/upgrading-from-v5

Suggested Solution

Unknown at the time.

Alternative Solutions

Unknown at the time.

Code of Conduct

  • I agree to follow this project's Code of Conduct
commented

Thank you for posting this issue. 🙇🏼‍♂️
We will come back to you shortly.

commented

Hey @JeroenSfdc - Yep, it looks like v6 isn't working with LWS. However, starting Summer '23 (forward-looking), we're rolling out the ability to import and use 3rd party web components in LWC on Salesforce as per the spec here, and Full Calendar is shipping a web component. So I'll try and see if it works that way once the feature is rolled out on LWC.

commented

Hi - I'm interested in getting this working too, using the JS only method (not web components). I've taken the dist/index.global.js and converted it to UMD so that it will support loadScript(), but I'm getting a FullCalendar.Calendar is not a constructor error. FullCalendar is visible as an object and Calendar is an exported class. Any ideas on a quick fix for this? Or an explanation of why LWS is blocking it (fyi - I'm trying this out in a trailhead playground with LWS enabled).

I've looked at the web component definition too and it would need a tweak to set Shadow Mode to closed, but the bigger problem may be that it requires an instance of the core module, which again needs to be instantiated as new FullCalendar.Calendar. I haven't tried it, but I could create two static resources, one for the core lib and the other for the web component and pass the reference. Happy to help / collaborate in any way.

commented

Hey @david-thomas-acn and @JeroenSfdc

I have taken a deeper look into Full Calendar v6, and I was able to make the JS file work with LWS. Here are my observations and steps:

  1. I've taken the bundled v6 script from https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.js.
  2. Upon investigation, there's a code snippet in this file that dynamically injects CSS. That's the part being blocked by LWS. Once I remove that code, the script works fine. But since I removed the CSS injection, the calendar wouldn't be styled.
  3. To style the calendar, we can re-use the CSS file that v5 gives us.

The updated code is in this branch - main...at/fullcalendarv6

  1. I've created a new file in the static resource bundle, that contains the updated v6 library with the problematic code removed.
  2. In the LWC, I am importing the new JS file, and the old CSS file.

Please let me know your thoughts. This is strictly a workaround for now, while we figure out how to make v6 work without modifying the source files.

commented

Hi @adityanaag3 that's awesome investigation. Is the CSS injection used by v6 purposefully blocked by LWS today? The workaround is nice, but there is of course no guarantee the v5 styles are consistent with how v6 has been designed. Interesting anyways to see it's technically working.

commented

Yep, but we could always pull the CSS from the v6 JS file itself (a little cumbersome to go through the file and pull out the CSS code, but it is going to be reliable).

The CSS is being injected into the <head> of the document, which is what I assume is being blocked.