fullcalendar.io Lightning Component

In this blog, I am going to show how to create a custom calendar using  FullCalendar .

Prerequisites

Download the  FullCalendar  and update the below js and CSS file to static resource

  1. jQuery РAn insanely popular JavaScript framework that FullCalendar requires to work.
  2. Moment.js РA great JavaScript library for parsing and manipulating dates.
  3. FullCalendar РThe actual FullCalendar library which contains fullcalendar.js and fullcalendar.css.

Apex Controller 

public class TaskcalendarController {
    @AuraEnabled
    public static List<Task__c> getTasks(){
        List<Task__c> result =  [Select Id, Name,Completed_Date__c,LastModifiedDate from Task__c ];
        return result ; 
    } 
}

Lightning Component 

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" 
                controller="TaskcalendarController">
    <ltng:require scripts="{!join(',', 
                           $Resource.fullcalendar + '/jquery.min.js', 
                           $Resource.fullcalendar + '/jquery-ui.min.js',
                           $Resource.fullcalendar + '/moment.min.js', 
                           $Resource.fullcalendar + '/fullcalendar.min.js')}"
                  styles="{!$Resource.fullcalendar + '/fullcalendar.min.css'}"
                  
                  afterScriptsLoaded="{!c.scriptsLoaded}" />
    
    <div id='calendar'></div>
    
    
</aura:component>
({
    scriptsLoaded : function(component, event, helper) {
        helper.getResponse(component);
    },
});


({
    getResponse: function(component) {
        var action = component.get("c.getTasks");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var result = response.getReturnValue();
                console.log("Data: \n" + result);
                var eventArr = [];
                result.forEach(function(key) {
                    eventArr.push({
                        'id':key.Id,
                        'start':key.Completed_Date__c,
                        'end':key.Completed_Date__c,
                        'title':key.Name
                    });
                });
                console.log(eventArr);
                this.loadCalendar(eventArr);
                
            } else if (state === "INCOMPLETE") {
            } else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        console.log("Error message: " + errors[0].message);
                    }
                } else {
                    console.log("Unknown error");
                }
            }
        });
        $A.enqueueAction(action);
    },
    
    loadCalendar :function(data){   
        var m = moment();
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay,listWeek'
            },
            defaultDate: m.format(),
            editable: true,
            navLinks: true, // can click day/week names to navigate views
            weekNumbers: true,
            weekNumbersWithinDays: true,
            weekNumberCalculation: 'ISO',
            editable: true,
            eventLimit: true,
            
            events:data
        });
    },
    
})