Fulcalendar in lightning component

Question

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

Answer 1

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.