1

I would like to use FullCalendar.js in BuildYourOwn(LWR) but it doesn't work in there. I confirmed following facts.

  1. FulCalendar.js(v3) worked in LightningRecordPage.
  2. FulCalendar.js(v3) didn't work in BuildYourOwn(LWR), with occuring error "Cannot read properties of undefined (reading 'indexOf')".
  3. FullCalenar.js(v4,v5) didn't work in both BuildYourOwn(LWR) and LightningRecordPage.
  4. An error "FullCalendar is not defined" occured when using FullCalenar.js(v4,v5) in both BuildYourOwn(LWR) and LightningRecordPage.

my code is here. This code use FullCalendar.js(v3). Could you tell me why doesn't it work?

JS

import { LightningElement, track } from 'lwc';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import FullCalendarJS from '@salesforce/resourceUrl/FullCalendarJS';
import getTourApplication from '@salesforce/apex/OppoCloseDate.getTourApplication';

export default class FullCalendar extends LightningElement {
  @track returnedApps = [] ;
  @track reserveList = [] ;

  renderedCallback() {
    Promise.all([
      loadScript(this, FullCalendarJS + '/FullCalendarJS/jquery.min.js'),
      loadScript(this, FullCalendarJS + '/FullCalendarJS/moment.min.js'),
      loadScript(this, FullCalendarJS + '/FullCalendarJS/fullcalendar.min.js'),
      loadStyle(this, FullCalendarJS + '/FullCalendarJS/fullcalendar.min.css'),
    ])
    .then(() => {
      this.getTasks();
    })
    .catch(error => {
      console.error({
        message: 'Not Loading FullCalendarJS',
        error
      });
    })
  }
  initialiseFullCalendarJs() {
    const ele = this.template.querySelector('div.fullcalendarjs');
    $(ele).fullCalendar({
      // fullcaledar options 
    });
  }
  getTasks(){
    // get data from Salesforce
  }
}

HTML

<template>
    <div class="slds-box outerPart" style="background:#ffffff;">
        <h1 class="slds-m-bottom_small">Title</h1>
        <div style="background:#ffffff;" class="slds-grid slds-m-top_medium">
          <div id="calendar" class="fullcalendarjs" lwc:dom="manual"></div>
        </div>
    </div>
</template>

xml

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

1 Answer 1

1

There is an issue with the window global with LWR. We solved this by converting the parent LWC component to light DOM element with

static renderMode = 'light';

and in the HTML

<template lwc:render-mode='light'>

and then loading FullCalendar 6.1.7 with a direct script insertion:

loadLibraryLight(){
        return new Promise((resolve, reject) => {
            try{
                const tag = document.createElement("script");
                tag.src = FullCalendarJS + '/v6_1_7/main/FullCalendar.js';
                tag.type = "text/javascript";
                tag.onload = () => {
                    resolve(window.FullCalendar);
                };
                this.context.querySelector('.fullcalendarlib').appendChild(tag);
            }catch(err){
                reject(err);
            }
        });        
    }

Just make sure that you also modify the library to insert the CSS styles in a known on your LWC component by overriding the injectStyles function

function injectStyles(styleText) {
        const uid = crypto.randomUUID();
        const tag = document.createElement("style");
        tag.innerText = styleText;
        tag.setAttribute('data-uid', uid)
        tag.onload = () => {
            console.log('Loaded style:', uid);
        };
        //Calee must have a div with the class
        document.querySelector('.fullcalendarlib').appendChild(tag);
    }
    function ensureElHasStyles(el) {
        console.log('Checking if el has styles', el);
        //Do nothing
    }

This did the trick and we could initialize the FullCalendar library within LWR.

You must log in to answer this question.

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