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();
},
})
jquery
ormoment
when using v4. Do you need them for some other reason? It might be worth cutting your example right back to the bare bones and seeing if that works. – Robs Apr 30 '19 at 13:05