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. Commented Jul 23, 2020 at 14:34
  • Do you get the error at compile time or at run time? Commented Jul 23, 2020 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. Commented Jul 25, 2020 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. Commented Jul 25, 2020 at 3:45

5 Answers 5

5

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.

3

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

5
  • 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) Commented Oct 14, 2020 at 8:55
  • Were you also facing the same issue ? How can we resolve this ? Commented Oct 14, 2020 at 8:58
  • Hi @Federico Giust Which version of fullCalendar were you using for this? e.g. 5.xx ? Thanks! Commented May 24, 2021 at 7:03
  • It was version 5 Commented Jul 6, 2021 at 19:29
  • @FedericoGiust answer is missing crucial mod at the last line... Here's fully working lib with mod: gist.github.com/sjurgis/08b0ae2aebffe5c4c36ffd37d3c8d416
    – dzh
    Commented Jun 4, 2022 at 9:22
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
0

So that you know, this version of FullCalendar works fine with Lightning Web Security (becoming GA for LWC only in Spring).

2
  • That's an org-wide setting tho, right? So it might enable FullCalendar, but break remaining of your org...? :D
    – dzh
    Commented Jun 3, 2022 at 8:23
  • Take into account we're increasing the number of use cases that are supported by loosening the restrictions (while keeping components secure) so, I'd try it. Also bear in mind it's a GA feature - for LWC only! If you've got aura components then my recommendation is to wait for it to be GA for aura too.
    – Alba Rivas
    Commented Jun 3, 2022 at 8:56
0

Somewhat works by improving Federico's answer, example in this gist

As Alba said, works great with LWS.

With old locker in renders initially ok, but Previous/Next buttons break it.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .