FullCalendar Plugin in Salesforce Lightning Component

Fullcalendar plugin is quite a useful tool for many calendar related application. It has been widely used with various javascript applications and even visualforce pages.

However, this plugin is also compatible with lightning as it is entirely created using jQuery.

The first step in using this plugin with your lightning component is to download it and upload it as a zip folder to your dev org as a static resource.

Download link – https://fullcalendar.io/download/

Salesforce Lightning Component

Salesforce Lightning Widget for Calendar

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 customise 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 “eventClick” function 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 dayview component in 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 “ev” 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.

Posted in Uncategorized.

Leave a Reply

Your email address will not be published. Required fields are marked *

*