FullCalendar Plugin in Salesforce Lightning Component

The second step is to include it in your lightning component –

<ltng:require styles=”{!$Resource. StaticResourceName  + ‘/fullcalendar-3.8.0/fullcalendar.css’}” scripts=”{!join(‘,’,
$Resource.StaticResourceName + ‘/fullcalendar-3.8.0/lib/jquery.min.js’,
$ Resource.StaticResourceName + ‘/fullcalendar-3.8.0/lib/moment.min.js’, $Resource.StaticResourceName  + ‘/fullcalendar-3.8.0/fullcalendar.js’)}”  afterScriptsLoaded=”{!c.doInit}” />
Please make sure that all the components are added, and the file paths are correct.
Once you use the above statement in your component, the doInit method becomes your entry point. It can of course be renamed to anything you like.
In the third step let us define the controller method
Once the header is defined, the calendar takes form in your component although it would not do anything yet.

The Header

You can customize the look as you wish. If the header has no basicWeek or agendaWeek mentioned under the right key the button to switch to week view will not appear (like in the above screenshot).
Example header and screen:
header: {
left: ”,
center: ‘title’,
right: ”
}

The dayRender method gets called every time a view is loaded, for example when you switch from month view to day view or vice versa.

The eventClickfunction is not mandatory, and you can redirect to any page by clicking on an event by adding an URL you want to the url attribute of the event.

The dayClick function executes when you click anywhere within the day view component on your screen. It is also not a mandatory function.
If you need to execute any apex controller method to show data or events in your calendar, then enclose this method – (‘#calendar’).fullCalendar({ }); in your callback as server-side calls in lightning are asynchronous.

Adding and Removing events

Adding – $(‘#calendar’).fullCalendar( ‘addEventSource’, ev );
Removing – $(‘#calendar’).fullCalendar( ‘removeEventSource’, ev );
Where is an array containing events.
The events array can be populated inside the “dayRender” method as this method is called at the time of loading of each view.