0

For some reason my code seem to return white screen and here is the code. Could you please advice what I am doing wrong?

My code is based on the previous post : Render fullcalendar on a lightning component

Component:

<aura:component controller="FullCalendarController" implements="force:appHostable,flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes" access="global" >
    <!--
<ltng:require scripts="{!$Resource.jqueryminjs}"  afterScriptsLoaded="{!c.afterScriptsLoaded}"/>
    <ltng:require scripts="{!$Resource.fullCalendarJS}"  afterScriptsLoaded="{!c.afterScriptsLoaded}"/>  
-->
    <ltng:require scripts="/resource.jqueryminjs,/Resource.fullCalendarJS" afterScriptsLoaded="{!c.afterScriptsLoaded}"/>
    <ltng:require styles="{!$Resource.FullCalendarCSS}"/>
    <ltng:require styles="{!$Resource.FullCalendarPrintCSS}"/>
    <aura:attribute name="events" type="Object[]" />
    <div aura:id="calendar"></div>  
</aura:component>

Apex Controller code:

public class FullCalendarController {

    @AuraEnabled
    public static List<Event> getEvents(){
        return [SELECT AccountId,EndDateTime,Id,StartDateTime,Subject FROM Event];
    }
}

ComponentController:

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

})

ComponentHelper

({
    loadDataToCalendar :function(component,data){      
            var ele = component.find('calendar').getElement();
            $(ele).fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek,basicDay'
                },
                defaultDate: '2016-04-01',
                editable: true,
                eventLimit: true,
                events:data
            });
        },

    tranformToFullCalendarFormat : function(component,events) {
        var eventArr = [];
        for(var i = 0;i < events.length;i++){
            eventArr.push({
                'id':events[i].Id,
                'start':events[i].StartDateTime,
                'end':events[i].EndDateTime,
                'title':events[i].Subject
            });
        }
        return eventArr;
    },

    fetchEvents : function(component) {
        var action = component.get("c.getEvents"); 
        var self = this;
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(component.isValid() && state === "SUCCESS"){
                var eventArr = self.tranformToFullCalendarFormat(component,response.getReturnValue());
                self.loadDataToCalendar(component,eventArr);
                component.set("v.events",eventArr);
            }
        });

        $A.enqueueAction(action); 
    }, 
})

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.