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

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;
    }

}

Step:-2
Create markup for component

<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>

Step:3
Create component controller here

({
    afterScriptsLoaded: function(cmp,evt,helper){
        var accountList = cmp.get("v.accountList");
        if(!accountList.length)
        {
            helper.fetchEvents(cmp);
        }
    },

})

Step:4
Create component helper class here

({
    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); 
    }, 
})

Step:5 For testing the component here i have create one lightning app

<aura:application >
	<c:FullCalendercmp ></c:FullCalendercmp>
</aura:application>

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

4 Comments so far

hemaPosted on12:32 pm - Sep 10, 2018

Hi ,
I have getting this error please help me

– org.auraframework.util.json.JsonStreamReader$JsonStreamParseException: Unterminated string [8, 30]: ‘) + month + ‘/’ +’: Source

AmitPosted on2:10 am - Sep 11, 2018

You saved my day. I have a old version 3.4 which stopped working today as Winter 19 come. I tried some way but finally got it working by your above suggested approaches.

Thanks

Leave a Reply