0

I have a requirment in which i have a picklist value which show the accounts and below that is a calender showing the events related to that account . initially when loaded the page shows the calender with all the events in all the accounts and after we choose a value in a picklist the calender will show only the events related to that particular account. i m not able to show the events in calender when the account is selected ,please help!!

lightning component

<ltng:require styles="/resource/calender/fullcalendar390/fullcalendar.css"/>
 <aura:handler name="init" action="{!c.doInit}" value="{!this}" />
<aura:attribute name='Objectlist' type='Object[]'/>
<aura:attribute name="buttonstate" type="Boolean" default="false"/>

</aura:handler>-->

<aura:attribute name="contactList" type="List" />




<div>
    <div class="slds-modal__header">
        <lightning:select label="Choose Account" name="acc" aura:id="acc" onchange="{!c.onchange}">


            <aura:iteration items="{!v.accounts}" var="account">
                <option value="{!account.Id}">{!account.Name}</option>
            </aura:iteration>
        </lightning:select>
    </div>


    <div class="slds-card">
        <div class="slds-p-around_medium">Draggable Events</div>
    </div>
    <div class="slds-card">
        <aura:iteration items="{!v.contactList}" var="contact">
            <div class="slds-p-around_medium" draggable="true" ondrop="{!ondrop}"> {!contact.Subject}</div>
            <br />
        </aura:iteration>
    </div>   
 </div>



 <lightning:buttonStateful
    labelWhenOff="List View"
    labelWhenOn="Grid View"

    state="{!v.buttonstate}"
                           onclick="{!c.handleClick }"/>

    <div id="calendar" class="slds-card">


</div>
<div id="listcalendar" class="slds-card"/>

=========================controller.js===================================

({ ondrop:function(component, event, helper) { helper.eventDrop(component,event,helper); }, doInit : function(component, event, helper) { // Helper function - fetchContacts called for interaction with server helper.fetchContacts(component, event, helper); helper.doIInit(component, event, helper); }, onchange:function(component,event,helper){

helper.OnChangeHelper(component,event);

},

afterScriptsLoaded: function(cmp,evt,helper){

     helper.fetchCalenderEvents(cmp);

},

 handleClick : function(component, event, helper){ 
     console.log(component.get("v.buttonstate"));
     var buttonstate = component.get("v.buttonstate");
     component.set("v.buttonstate",!buttonstate);
     if(!buttonstate){
      $("#listcalendar").show();
     $("#calendar").hide();
     $('#listcalendar').fullCalendar({
    defaultView: 'listWeek',
         listDayFormat : true,
         events : component.get("v.Objectlist")

}); console.log('debug'); } else{ $("#calendar").show(); $("#listcalendar").hide();
helper.fetchCalenderEvents(component); }

},

})

==============================helper.js===================================

({ 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;

    var self = this;
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek,basicDay'
        },
        selectable : true,
        defaultDate: currentDate,
        editable: true,
        eventLimit: true,
        events:data,
        dragScroll : true,
        droppable: true,
        weekNumbers : true,
        aspectRatio : 3,
        eventDrop: function(event, delta, revertFunc) {

            alert(event.title + " was dropped on " + event.start.format());

            if (!confirm("Are you sure about this change?")) {
                revertFunc();
            }
            else{
                var eventid = event.id;
                var eventdate = event.start.format();
                self.editEvent(component,eventid,eventdate);
            }

        },
        eventClick: function(event, jsEvent, view) {
            console.log(event.id);
            var editRecordEvent = $A.get("e.force:editRecord");
            editRecordEvent.setParams({
                "recordId": event.id
            });
            editRecordEvent.fire();
        },
        dayClick :function(date, jsEvent, view) {
            console.log(date.format());
            var datelist = date.format().toString().split('-');
            console.log(datelist[0]);
            console.log(parseInt(datelist[1])-1);
            var datetime = new Date(datelist[0],parseInt(datelist[1])-1,parseInt(datelist[2])+1,0,0,0,0);
            console.log(datetime);
            var createRecordEvent = $A.get("e.force:createRecord");
            createRecordEvent.setParams({
                "entityApiName": "Event",
                "defaultFieldValues": {
                    'StartDateTime' :  datetime

                }
            });
            createRecordEvent.fire();
        },


    });
},


formatFullCalendarData : function(component,events) {
    var josnDataArray = [];
    for(var i = 0;i < events.length;i++){
        var startdate = $A.localizationService.formatDate(events[i].StartDateTime);
        var enddate = $A.localizationService.formatDate(events[i].EndDateTime);
        josnDataArray.push({
            'title':events[i].Subject,
            'start':startdate,
            'end':enddate,
            'id':events[i].Id
        });
    }
    console.log('josnDataArray'+josnDataArray);
    return josnDataArray;
},

OnChangeHelper:function(component, event) {
   //var value =  component.find("acc").get("v.value");
   // var evSource = event.getSource();
   // var id = evSource.get('v.account.Id');
   var accId = event.getSource().get("v.value");
   console.log('accId: ' +accId);
   var action = component.get("c.getAllEventsOnChange");
   action.setParams({
       "accountId": accId 
   });
   action.setCallback(this, function (response) {
       var state = response.getState();
       if (state === "SUCCESS") {
          // alert('reached');
           var data= response.getReturnValue();
           console.log(JSON.stringify(data));
           var josnArr = this.formatFullCalendarData(component,response.getReturnValue());
           this.loadDataToCalendar(component,josnArr);
           component.set("v.Objectlist",josnArr);

       } else if (state === "ERROR") {

       }
   });

   $A.enqueueAction(action);        

},

fetchCalenderEvents : function(component) {
    var action=component.get("c.getAllEvents");

    action.setCallback(this, function (response) {
        var state = response.getState();
        if (state === "SUCCESS") {
            var data= response.getReturnValue();
            console.log(JSON.stringify(data));
            var josnArr = this.formatFullCalendarData(component,response.getReturnValue());
            this.loadDataToCalendar(component,josnArr);
            component.set("v.Objectlist",josnArr);

        } else if (state === "ERROR") {

        }
    });

    $A.enqueueAction(action);

}, 

doIInit: function(component, event, helper) {

    var action = component.get("c.getAccountList");
    console.log("@@@action",action);
    action.setCallback(this, function(result){
        var accounts = result.getReturnValue();
        console.log("@@@@accounts",accounts);
        component.set("v.accounts", accounts);
        window.setTimeout(
            $A.getCallback( function() {
                component.find("acc").set("v.value", accounts[4].Id);
            }));
    });
    $A.enqueueAction(action);
},


editEvent : function(component,eventid,eventdate){
    var action=component.get("c.updateEvent");
    console.log(eventdate);
    action.setParams({ eventid : eventid ,
                      eventdate : eventdate});

    action.setCallback(this, function (response) {
        var state = response.getState();
        if (state === "SUCCESS") {
            console.log('updated');

        } else if (state === "ERROR") {

        }
    });

    $A.enqueueAction(action);

},

fetchContacts : function(component, event, helper) {
    var action = component.get("c.getContactList");
    var accountId = component.get("v.recordId");
    action.setCallback(this, function(response) {
        var state = response.getState();
        if(state === 'SUCCESS') {
            var EventList = response.getReturnValue();
            component.set("v.contactList",EventList);
        }
        else {

            alert('Error in getting data');
        }
    });

    $A.enqueueAction(action);
},

})

=============================apex controller==================================

public with sharing class fullCalendarServerController {

 @AuraEnabled
public static list<Event> getAllEventsOnChange(String accountId){
    system.debug('accountId: '+accountId);
   list<Event> eventlist =[Select id, EndDateTime,StartDateTime,Subject from Event where
                           What.Type IN ('Account') AND AccountId=: accountId];
    system.debug('@eventlist:'+eventlist);
   return eventlist;

}

@AuraEnabled
public static list<Event> getAllEvents(){
    list<Event> eventlist =[Select id, EndDateTime,StartDateTime,Subject from Event where
                            What.Type IN('Account') ];
    return eventlist;
}
@AuraEnabled
public static Account[] getAccountList() {
    return [SELECT id, Name FROM Account];
}

@AuraEnabled
public static void updateEvent(string eventid,string eventdate){
    system.debug(eventid);
    system.debug(eventdate);
    string eventdatelist = eventdate.replace('T',' ');

    system.debug(eventdatelist);
    Event e= new event(id = eventid);
    e.StartDateTime = DateTime.valueof(eventdatelist);
    update e;

}

@AuraEnabled public static List getContactList() { // Getting the list of contacts from where Id is in accountIds List EventList =[Select id, EndDateTime,StartDateTime,Subject from Event WHERE What.Type IN('Account')]; System.debug(''+EventList);

            // Returning the contact list
    return EventList;
}

}

=========================================================================

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.