1

I've implemented FullCalendar v.5 (from FullCalendar.io) into my LWC. On the home-, record- or other pages inside the Salesforce platform it works well, but my LWC doesn't work on the Lightning Experience site and throws an error - ReferenceError: FullCalendar is not defined. Google searches have not yielded any results and now I am at the dead end. Does anyone have any ideas? Here is my code:

EventsCalendar.js

import { LightningElement, track } from 'lwc';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import FullCalendarJS from '@salesforce/resourceUrl/fullCalendar';

import getCalendarEvents from '@salesforce/apex/EventsCalendarController.getCalendarEvents';

export default class EventsCalendar extends LightningElement {
  @track allEvents = [];
  @track selectedEvent = undefined;

  CALENDAR_ERROR_MESSAGE = 'Error occured on FullCalendarJS';
  TIMEZONE_VARIANT = 'local';
  fullCalendarJsInitialised = false;

 renderedCallback() {

    if (this.fullCalendarJsInitialised) {
      return;
    }

    this.fullCalendarJsInitialised = true;

    Promise.all([
      loadScript(this, FullCalendarJS + '/main.js'),
      loadStyle(this, FullCalendarJS + '/main.css'),
    ])
    .then(() => {
      this.getAllEvents();
    })
    .catch(error => {
      console.error({
        message: this.CALENDAR_ERROR_MESSAGE,
        error
      });
    })
  }

  initialiseFullCalendarJs() {
    const calendarElement = this.template.querySelector('div.fullcalendarjs');

    const calendar = new FullCalendar.Calendar(calendarElement, {
      customButtons : {
        newEventButton : {
          text : 'New Event',
          click : () => this.newEventClickHandler()
        }
      },
      headerToolbar : {
        left: 'prev,next newEventButton',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,listWeek'
      },
      businessHours:   {
        daysOfWeek: [ 1, 2, 3, 4, 5 ],
        startTime: '09:00',
        endTime: '18:00'
      },
      firstDay: 1,
      initialView: 'dayGridMonth',
      initialDate: new Date(),
      nowIndicator: true,
      selectable: false,
      navLinks : true,
      editable : true,
      events : this.allEvents,
      dragScroll : true,
      droppable : false,
      weekNumbers : false,
      dayMaxEvents: true,
      dateClick : this.dayClickHandler.bind(this),
      eventClick : this.eventClickHandler.bind(this)

    });
    calendar.render();
  }

  getAllEvents() {
    getCalendarEvents()
      .then(result => {
        this.allEvents = result.map(item => {
          return {
            id : item.Id,
            editable : true,
            title : item.Title__c,
            start : item.Start_Date__c,
            end : item.End_Date__c,
            description : item.Description__c,
            allDay : false,
          };
        });
        this.initialiseFullCalendarJs();
      })
      .catch(error => {
        console.log(this.CALENDAR_ERROR_MESSAGE, error)
      });
  }

main.js

4
  • Welcome to SFSE, is the Cache Control on fullCalendar static resouce set to public ?
    – Raul
    Commented Sep 30, 2022 at 13:11
  • Yes, fullCalendar static resouce set as public Commented Sep 30, 2022 at 13:31
  • Ah great, something else then. :) Have you also seen this question/answers: salesforce.stackexchange.com/a/315612/4726, before v5 was not working even in LWC/aura and they were able to convert the fullcalendar to ES6 compatible module. So I am wondering if this still needs to be done in your case for communities/experience.
    – Raul
    Commented Sep 30, 2022 at 13:38
  • I did what was recommended there and FullCalendar started work inside the platform(Home Page, Record Page etc.), but it still doesn't work in Lightning Experience. Commented Sep 30, 2022 at 14:13

1 Answer 1

-1

The issue was solved by disabling a "Lightning Locker" and switching "Content Security Policy (CSP) Security Level" to "Relaxed CSP" in the Experience Builder's Settings. This is a temporary solution until we find out why the Lightning Locker blocks the FullCalendar library.Locker location

You must log in to answer this question.

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