The ltng:require component allows multiple libraries to be specified andbut 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 required 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.