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