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();
},
})
Best 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.