Full calendar lightning salesforce

Bynayakdillip

Full calendar lightning salesforce

FullCalendar calender implementation in salesforce lightning application

Here i explain where you can use this lighting component

  • 1.Lightning Community
  • 2.Lightning Salesforce Page

Before creating the component you need to download full calendar and add into the static Resource

Here i have created one apex controller class where i fetch account information with start Date,End Date,Name and ID

[html]
public class AccountClass {
@AuraEnabled
public static list<Account> getAllAccounts()
{
list<Account> accountList=[select id,name,Start_Date__c,Last_Date__c from account where Start_Date__c!=null limit 10];
return accountList;
}

}
[/html]
Step:-2
Create markup for component
[html]
<aura:component controller="AccountClass" implements="flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes" access="global" >
<ltng:require styles="{!$Resource.fullcalender + ‘/fullcalendar390/fullcalendar.css’}"
scripts="{!join(‘,’,
$Resource.fullcalender + ‘/fullcalendar390/lib/jquery.min.js’,
$Resource.fullcalender + ‘/fullcalendar390/lib/moment.min.js’,
$Resource.fullcalender + ‘/fullcalendar390/fullcalendar.js’
)}"
afterScriptsLoaded="{!c.afterScriptsLoaded}" />
<ltng:require styles="/resource/fullcalender/fullcalendar390/fullcalendar.css"/>

<aura:attribute name="accountList" type="object[]"></aura:attribute>

<div id="calendar"></div>
</aura:component>
[/html]
Step:3
Create component controller here
[html]
({
afterScriptsLoaded: function(cmp,evt,helper){
var accountList = cmp.get("v.accountList");
if(!accountList.length)
{
helper.fetchEvents(cmp);
}
},

})
[/html]
Step:4
Create component helper class here
[html]
({
loadDataToCalendar :function(component,data){
//Find Current date for default date
var d = new Date();
var month = d.getMonth()+1;
var day = d.getDate();
var currentDate = d.getFullYear() + ‘/’ +
(month<10 ? ‘0’ : ”) + month + ‘/’ +
(day<10 ? ‘0’ : ”) + day;

$(‘#calendar’).fullCalendar({
header: {
left: ‘prev,next today’,
center: ‘title’,
right: ‘month,basicWeek,basicDay’
},
defaultDate: currentDate,
editable: true,
eventLimit: true,
events:data
});
},

formatFullCalendarData : function(component,events) {
var josnDataArray = [];
for(var i = 0;i < events.length;i++){
josnDataArray.push({
‘title’:events[i].Name,
‘start’:events[i].Start_Date__c,
‘end’:events[i].Last_Date__c,
‘id’:events[i].Id
});
}
return josnDataArray;
},

fetchEvents : function(component) {
var action = component.get("c.getAllAccounts");
var self = this;
action.setCallback(this, function(response) {
var state = response.getState();
if(component.isValid() && state === "SUCCESS"){
var josnArr = self.formatFullCalendarData(component,response.getReturnValue());
self.loadDataToCalendar(component,josnArr);
component.set("v.accountList",josnArr);
}
});

$A.enqueueAction(action);
},
})
[/html]
Step:5 For testing the component here i have create one lightning app
[html]
<aura:application >
<c:FullCalendercmp ></c:FullCalendercmp>
</aura:application>
[/html]

Step:6:For Testing the component for lightning community bold.I have just added the component over community page its look like this

If you have any issue share me on the comment box i will help you

About the author

nayakdillip administrator

Leave a Reply