1

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?

4
  • Probably you need to load all the dependent scripts files. Jul 23 '20 at 14:34
  • Do you get the error at compile time or at run time? Jul 23 '20 at 14:55
  • @rahulgawale I did as in documentation plus there is only one script main.js, and when I do it in simple HTML, I mean test it in locale desktop, it works. Jul 25 '20 at 3:44
  • @SanderdeJong I get this error at run time. I also tried to do it in Aura and it doesn't work, but in VFP everything is OK. Jul 25 '20 at 3:45
4

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.

2

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

4
  • I tried this approach, but I was getting the below error : Error occured on FullCalendarCmp : TypeError: Cannot read property 'length' of undefined at addDefs (main.js:5556) at addDefs (main.js:5560) at buildPluginHooks (main.js:5566) at CalendarDataManager.eval [as buildPluginHooks] (main.js:5577) at CalendarDataManager.processRawCalendarOptions (main.js:7323) at CalendarDataManager._computeOptionsData (main.js:7296) at CalendarDataManager.eval [as computeOptionsData] (main.js:1082) at new CalendarDataManager (main.js:7128) Oct 14 '20 at 8:55
  • Were you also facing the same issue ? How can we resolve this ? Oct 14 '20 at 8:58
  • Hi @Federico Giust Which version of fullCalendar were you using for this? e.g. 5.xx ? Thanks! May 24 at 7:03
  • It was version 5 Jul 6 at 19:29
0

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/

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.