Integrating to Salesforce LWC components

Reduced Test Case

Hi, after digging some hours, I end up reporting the issue with not much investigation to share.

Integrating this lib (v5) to Salesforce LWC is not working for several reasons :

1. The script tag version doesn’t want to load properly when imported in LWC framework because of Locker Service thing

   I found how to fix that by doing the following “patch” : Replace var FullCalendar = (function (exports) { by (function (exports) { window.FullCalendar = exports;

2. The click handler is going crazy Clicking on any button trigger the “go to today” date change. I don’t understand why this happens.

   I tried to reproduce the issue using Lightning Out (the open source version of LWC) but it “unfortunately” works well : https://webcomponents.dev/edit/wZjyCV5g1kvGjA3j2CLo/src/app.js

   I can probably setup an example inside a Salesforce org that will show the issue, contact me in MP so that I can provide credentials for you. In the mean time we can consider this as “not reproducible with a link”.

Bug Description

1. Upload fullcalendar zip as static resource (zip contains two root files, main.js & main.css)
2. Setup a simple calendar component :

Template:

<template>
    <div
        data-id="calendar"
        lwc:dom="manual"
    ></div>
</template>

Controller:

import { LightningElement, wire } from 'lwc'

import fullCalendar from '@salesforce/resourceUrl/fullcalendar'

export default class TimeSlotCalendar extends LightningElement {
    calendar
    initialized = false

    async connectedCallback () {
        if (!this.initialized) {
            this.initialized = true

            try {
                await Promise.all([
                    loadScript(this, fullCalendar + '/main.js'),
                    loadStyle(this, fullCalendar + '/main.css')
                ])

                this.tryCalendarInitialization()
            } catch (error) {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error loading calendar',
                        message: JSON.stringify(error),
                        variant: 'error'
                    })
                )
            }
        }
    }

    tryCalendarInitialization () {
        const calendarElement = this.template.querySelector('[data-id=calendar]')

        // calendar.changeView('timeGridDay')
        this.calendar = new window.FullCalendar.Calendar(calendarElement, {
            locale: 'fr',
            headerToolbar: {
                left: 'today',
                center: 'prev,title,next',
                right: 'timeGridDay,timeGridWeek,dayGridMonth',
            },
            initialView: 'timeGridWeek',
            editable: false,
            dayMaxEvents: true,
            navLinks: true,
        })

        this.calendar.render()
    }
}

Meta file

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>51.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

1. Drop the component to the home page
2. Try to navigate in the calendar, not working, only going to “today” no matter what button you click

I will be more than happy to investigate further if I get more elements.

[dan-flux-capacity]

@Bartheleway Sure, I’m using the latest version 5.5.1 because there are a handful of new features that are important for my project (such as sticky header), and just assigned FullCalendar to the window in the script file, at the end to allow for compatibility within LWC.

I’m setting the headerToolbar to not display, and created my own header in the LWC with buttons to call the available methods for Calendar navigation, etc. The trickier part is that I’m also using the Resource timeline views, so I had to essentially replace the expand/collapse function (hiding and showing child rows under a given resource) with a custom process, as I found this issue prevented the standard expand/collapse to just not respond to clicks. Basically hid the native FC icons that fire the show/hide on each row via the Resource Render Hooks, and replaced with custom buttons that called a custom function to find and show/hide associated child rows for the given Resource.

Event click functions appear to work fine, so those are used as normal.

Overall this is very functional, though performance can be issue with much larger data volumes (roughly when approaching about 5000 events), and I’m not sure how much of that is due to my hacks to make it work in LWC vs just general ability of the browser/javascript engine to render it all.

[johnpanos]

@Bartheleway Did that work?