0

I'm using a fullcalendar library in my lightning component but the calendar is not showing up. Component:

    <aura:component >
   <ltng:require scripts="{!$Resource.jQuery}"/> 
    <ltng:require scripts="/resource/FullCalendar/lib/jquery.min,
                           /resource/FullCalendar/lib/moment.min,
                           /resource/FullCalendar/fullcalendar"/>
    <div id="calendar">
        <div onclick="{!c.comp}">test</div>
    </div>
</aura:component>

Controller:

({
comp : function(component, event, helper) {
    $(document).ready(function() {

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay,listWeek'
        },
        defaultDate: '2017-02-12',
        editable: true,
        navLinks: true, // can click day/week names to navigate views
        eventLimit: true, // allow "more" link when too many events
        events: {
            url: 'php/get-events.php',
            error: function() {
                $('#script-warning').show();
            }
        },
        loading: function(bool) {
            $('#loading').toggle(bool);
        }
    });

   });
  }
})

On click of test I want to show the calendar. But I'm getting this error $(...).fullCalendar is not a function TypeError

  • Check if necessary plugins for fullCalendar is loaded. Do you really need document.ready()? – Raul Mar 19 '17 at 11:21
  • 1
    if the below answer helped resolve your question, please consider marking it as the answer. Thanks! – glls Jun 6 '17 at 17:37
2

The ltng:require component allows multiple libraries to be specified but loads them asynchronously. However, it provides an afterScriptsLoaded event which is the best place to hook up your logic as that call will be made once all the libraries have been loaded:

<aura:component >
    <div aura:id="calendar"></div>
    <ltng:require scripts="{! ... }" afterScriptsLoaded="{! c.scriptsLoaded }"/>
</aura:component>

then in the controller:

({
    scriptsLoaded : function(component, event, helper) {
        $(document).ready(function() {
            var c = component.find("calendar");
            var el = c.getElement();
            $(el).fullCalendar({...});
        });
    }
})

Note the use of find rather than the hard-coding of a HTML Id (which would only allow one instance of your component and also potentially clash with other hard coding of the same Id value).

I am unsure about the value of $(document).ready in this case but don't think it will do any harm.

Be sure to use the library versions listed in LockerService and Lightning Container Component: Securely Using Third-Party Libraries in Lightning Components.

  • I use this same setup and it works for me. The component.find() to get the div element is essential. This should be the accepted answer. Just saying ;) – Folkert Jun 1 '18 at 9:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.