TransWikia.com

Can not connect LWC and fullCalendar v5

Salesforce Asked on December 12, 2021

I am trying to use fullCalendar v5 library in LWC but I couldn’t make it work 🙁

import { loadStyle, loadScript } from 'lightning/platformResourceLoader';

import calendarResource from '@salesforce/resourceUrl/fullcalendar5';

export default class Calendar extends LightningElement {

    connectedCallback() {
        Promise.all([
            loadScript(this, calendarResource + '/lib/main.js'),
            loadStyle(this, calendarResource + '/lib/main.css')
        ]).then(() => {
            try {
                var ele = this.template.querySelector('.calendar');
                var calendar = new FullCalendar.Calendar(ele, {});
                calendar.render();
    
            } catch (error) {
                console.error('Error calendar init', error);
            }

        }).catch(error => {
            console.error('Error promise all', error);
        });
    }
}

Library is being imported successfully but when I’m trying to build calendar (new FullCalendar.Calendar) it says ReferenceError: FullCalendar is not defined

In VFP everything is working good:

<apex:page>
    <apex:includeScript value="{!$Resource.fullcalendar5 + '/lib/main.js'}"/>
    <apex:stylesheet value="{!$Resource.fullcalendar5 + '/lib/main.css'}"/>
    <html>
        <head>
            <title>Calendar</title>
            <meta name="viewport" content="initial-scale=1.0"></meta>
            <meta charset="utf-8"></meta>
        </head>
        <body>
            <div class="calendar"></div>

            <script>
                var ele = document.querySelector('.calendar');
                var calendar = new FullCalendar.Calendar(ele, {});
                calendar.render();
            </script>
        </body>
    </html>
</apex:page>

Can someone help to make it working properly?

fullcalendarlightning web components

3 Answers

I was able to make fullcalendar v5 work in lwc just now.

Your component code is fine, you need to use the already built library and convert main.js to UMD format.

So in main.js you need to change the first line

var FullCalendar = (function (exports) {

To this

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? 
factory(exports) :
    typeof define === 'function' && define.amd ? define(['exports'], factory) :
    (global = global || self, factory(global.FullCalendar = {}));
}(this, function (exports) {

And then on the elementClosest method change the return statement to el.closest.

function elementClosest(el, selector) {
    //return closestMethod.call(el, selector);
    return el.closest(selector);
}

I haven't tested if all features work, but at least it loads without errors.

enter image description here

Answered by Federico Giust on December 12, 2021

Really V5 is not working with neither with AURA and LWC.

V4 is working but has a bug when you hover over the calendar, to fix it I did small workaround mentioned here

After this fix I am able to create a calendar and for now all fullCalendar features are working good in LWC.

Answered by Ярослав Пажух on December 12, 2021

For some reason v4 and v5 are not rendering in lwc component. I am able to achieve it using v3 and you can refer this. Also you need to load dependent files such as jquery and moment js.

Full demo is here:

FullCalendar - v3 - https://auraenabled.com/2020/07/fullcalendar-in-lightning-web-component/

Answered by brahmaji tammana on December 12, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Questions

Recent Answers

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP