+ Start a Discussion
Bhu'1 salesforceBhu'1 salesforce 

How to show Full Calendar jquery Plugin in salesforce Lightning ?

Hi All,

Am working on salesforce Lightning, I just wanted to show Full Calander jquery plugin in salesforce Lightning Component. Can someone please help in this regard.

Thanks & Regards,
Bhuvan 
Mohammad RuhullaMohammad Ruhulla
Hi Bhuvan, Did u get any Resolution on this ?
Sagar Avate 18Sagar Avate 18
Hi Bhuvan, Did u get any Resolution on this ?
Mustafa JhabuawalaMustafa Jhabuawala
If you got any solution please share.
MalakondaiahMalakondaiah
Hi All,
Custom Calendar for both lightning as well as classic or full calendar plugin process.
Please help me.

Thanks,
Malakondaiah


 
Raj VakatiRaj Vakati
Use the below code 
 
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 ; 
    }
    
    
}
 
<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.getLazyResponse(component);
    },
    
    
});
 
({
    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
        });
    },
    
    
    
    getLazyResponse: function(component) {
        var action = component.get("c.getTasks");
        // action.setParams({URL: url});
        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.LastModifiedDate,
                        'end':key.LastModifiedDate,
                        'title':key.Name
                    });
                });
                console.log(eventArr);
                this.loadCalendar(eventArr);
                
            } else if (state === "INCOMPLETE") {
                console.log("Error: incompleted call");
            } 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);
        console.log('ajax call fired');
    }
})