FullCalendar V4 is not working in lightning component

I am trying to show calendar view using fullcalender.io v4 in lightning component.

Initially the fullcalender loads without any issue but when I hover over the calender UI, I’m getting the below error:

[Illegal invocation]
elementClosest()@https://sg1414-dev-ed.lightning.force.com/resource/1553009393000/FullCalendar/fullcalendar-3.10.0/fullCalendar/fullCalendar4.0.js:125:30
Proxy.realHandler()@https://sg1414-dev-ed.lightning.force.com/resource/1553009393000/FullCalendar/fullcalendar-3.10.0/fullCalendar/fullCalendar4.0.js:379:32

Here’s the code:

<aura:component implements="force:appHostable" access="global">
    <aura:attribute name="recId" type="string" />
    <ltng:require scripts="{!join(',', 
                           $Resource.FullCalendar + '/fullcalendarV4/fullCalendar/jquery.min.js', 
                           $Resource.FullCalendar + '/fullcalendarV4/fullCalendar/jquery-ui.min.js',
                           $Resource.FullCalendar + '/fullcalendarV4/fullCalendar/moment.js', 
                           $Resource.FullCalendar + '/fullcalendarV4/fullCalendar/fullCalendar4.0.js',
                           $Resource.FullCalendar + '/fullcalendarV4/fullCalendar/interaction.min.js',
                           $Resource.FullCalendar + '/fullcalendarV4/fullCalendar/timegrid.min.js',
                           $Resource.FullCalendar + '/fullcalendarV4/fullCalendar/daygrid.js' )}"
                  styles="{!join(',',
                             $Resource.FullCalendar + '/fullcalendarV4/fullCalendar/fullCalendar.css',
                          $Resource.FullCalendar + '/fullcalendarV4/fullCalendar/timegrid.css',
                            $Resource.FullCalendar + '/fullcalendarV4/fullCalendar/daygrid.css')}"

                  afterScriptsLoaded="{!c.scriptsLoaded}" />
    <div aura:id='calendar'></div>

</aura:component>    

Controller.js:

({
    scriptsLoaded : function(component, event, helper) {
        console.log('Script loaded succesfully')
        var calendar = new FullCalendar.Calendar(component.find("calendar").getElement(), {
            plugins: [ 'dayGrid'],
            events: data
        });
        calendar.render();
    },

})

Answer

I know I’m a year late, but I think you’re referencing the wrong scripts. FullCalendar works for me and I’ve imported the following four files from a zip file (static resource):

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')

I’m using it in a lightning web component rather than a lightning (aura) component, but that shouldn’t matter.

Attribution
Source : Link , Question Author : gowtham , Answer Author : Tom Reinman

Leave a Comment