0

I know that this question has already been asked here - stackExchange

The change which has been suggested, in the fullCalendar library is I think already has been implemented in it by FullCalendar Developers. Check the code snippets -

193  // Querying
194  // ----------------------------------------------------------------------------------------------------------------
195  function elementClosest(el, selector) {
196    if (el.closest) {
197        return el.closest(selector);
198        // really bad fallback for IE
199        // from https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
200    }
201    if (!document.documentElement.contains(el)) {
202        return null;
203    }
204    do {
205        if (elementMatches(el, selector)) {
206            return el;
207        }
208        el = (el.parentElement || el.parentNode);
209    } while (el !== null && el.nodeType === 1);
210    return null;
211  }

But even after trying with the solution mentioned in the post and many other solution, I'm still facing the challenge to run the fullCalendar library.

I have also enabled Lightning Web Security, as mentioned in the blog post - getridbug


I'm trying to use FullCalendar library v5.11.0 with LWC

HTML Code (fullCalendarLWC.html)

<template>
   this is calendar
   <div id='calendar'></div>
</template>

XML Code (fullCalendarLWC.js-meta.xml)

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

JS Code (fullCalendarLWC.js)

import { LightningElement } from 'lwc';
import { loadScript, loadStyle } from "lightning/platformResourceLoader";
import fullcalendarJS from '@salesforce/resourceUrl/fullcalendar';
import luxonJS from '@salesforce/resourceUrl/luxon';
import luxonConnectorJS from '@salesforce/resourceUrl/luxonConnector';
import fullcalendarCss from '@salesforce/resourceUrl/fullcalendarCss';

export default class fullCalendarLWC extends LightningElement {
    connectedCallback(){
        loadScript(this, fullcalendarJS)
            .then(() => {
                console.log('Loaded fullcalendar');
            })
            .catch((error) => console.log('error----'+error));

        loadScript(this, luxonJS)
            .then(() => {
                console.log('Loaded luxonJS');
            })
            .catch((error) => console.log('luxonJS error----'+error));

        loadScript(this, luxonConnectorJS)
            .then(() => {
                console.log('Loaded luxonConnectorJS');
                console.log(FullCalendar);
            })
            .catch((error) => console.log('luxonConnectorJS error----'+error));

        loadStyle(this, fullcalendarCss)
            .then(() => console.log('Loaded fullcalendarCss'))
            .catch(error => console.log(error));

        
        // not using this set of code, until Fullcalendar is loaded properly.
        /*var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
        
            initialView: 'timeGridWeek',
            headerToolbar: { 
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay'
            },
            timeZone: 'Australia/Darwin',
            //initialDate: '2022-04-07',
            firstDay: 1,
            weekNumbers: true, // show week numbers
            navLinks: true,
            displayEventTime: true, // display the start time
            displayEventEnd: true, // display the end time
            eventTimeFormat: { hour: "numeric", minute: "2-digit", timeZoneName: "short" },
            events: [
                {
                    title: 'Meeting',
                    start: '2022-05-11T14:30:00',
                    extendedProps: {
                    status: 'done'
                    }
                },
                {
                    title: 'Birthday Party',
                    start: '2022-05-13T07:00:00',
                    backgroundColor: 'green',
                    borderColor: 'green'
                }
            ]
        });
        calendar.render();*/
    }
}

Lightning App, in which this LWC is called (fullCalendarApp.app)

<aura:application >
   <c:fullCalendarLWC />
</aura:application>

Getting Following error in Dev Console --

ReferenceError: FullCalendar is not defined

enter image description here

1 Answer 1

0

FullCalendar is likely not getting added to the global namespace in your error. Try changing the first line of the FullCalendar v5.11 module as suggested by Federico. Also see this pull request in the lwc-recipes repo for the fix where a similar approach is used on the minified file.

Replace this

var FullCalendar = (function (exports) {

With this

 window.FullCalendar = (function (exports) {

You must log in to answer this question.

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