function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
ravinder singh 95ravinder singh 95 

Fullcalnder Lightning Aura not refreshing on onchange event

FullCalendar : when fulcalendar loads at first it is working fine, but I have a filter on top of calendar, when I choose some value from picklist , I got the new array from apx  but that array is not updating on calendar, Calendar UI is not refreshing.
It is Aura Component.

({

    fetchPicklistValues: function(component, objDetails, controllerField, dependentField, mapAttrName) {
        // call the server side function  
        var action = component.get("c.getDependentMap");
        // pass paramerters [object definition , contrller field name ,dependent field name] -
        // to server side function 
        action.setParams({
            'objDetail': objDetails,
            'contrfieldApiName': controllerField,
            'depfieldApiName': dependentField
        });
        //set callback   
        action.setCallback(this, function(response) {
            if (response.getState() == "SUCCESS") {
                //store the return response from server (map<string,List<string>>)  
                var StoreResponse = response.getReturnValue();
                // once set #StoreResponse to depnedentFieldMap attribute 
                component.set(mapAttrName, StoreResponse);

                if (mapAttrName == 'v.depnedentFieldMap') {

                    // create a empty array for store map keys(@@--->which is controller picklist values) 
                    var listOfkeys = []; // for store all map keys (controller picklist values)
                    var ControllerField = []; // for store controller picklist value to set on lightning:select. 

                    // play a for loop on Return map 
                    // and fill the all map key on listOfkeys variable.
                    for (var singlekey in StoreResponse) {
                        listOfkeys.push(singlekey);
                    }

                    //set the controller field value for lightning:select
                    if (listOfkeys != undefined && listOfkeys.length > 0) {
                        ControllerField.push('--- None ---');
                    }

                    for (var i = 0; i < listOfkeys.length; i++) {
                        ControllerField.push(listOfkeys[i]);
                    }
                    // set the ControllerField variable values to country(controller picklist field)
                    component.set("v.listControllingValues", ControllerField);
                }
            } else {
                alert('Something went wrong..');
            }
        });
        $A.enqueueAction(action);
    },

    fetchDepValues: function(component, ListOfDependentFields, lstAttrName) {
        // create a empty array var for store dependent picklist values for controller field  
        var dependentFields = [];
        dependentFields.push('--- None ---');
        for (var i = 0; i < ListOfDependentFields.length; i++) {
            dependentFields.push(ListOfDependentFields[i]);
        }
        // set the dependentFields variable values to store(dependent picklist field) on lightning:select
        component.set(lstAttrName, dependentFields);

    },

    sendParam: function(component, controllerValueKey, countryValue, productValue) {
        console.log('controllerValueKey' + controllerValueKey + 'countryValue' + countryValue + 'productValue' + productValue);
        if (controllerValueKey != null && countryValue != null && productValue != null) 
        {
            console.log('ENTER');
            console.log('productValue' + productValue);
            // call the server side function  
            var action = component.get("c.selectedPicklistValues");
            if(controllerValueKey != null && controllerValueKey != '--- None ---' && countryValue != null && countryValue != '--- None ---' && productValue == '--- None ---') {
                console.log('THIS IF');
                action.setParams({
                    'regionVal': controllerValueKey,
                    'countryVal': countryValue,
                    'productVal': '',
                    'string4': '',
                    'string5': 'secondtime'
                });
            }
            if(controllerValueKey != null && controllerValueKey != '--- None ---' && countryValue == '--- None ---' && productValue == '--- None ---') {
                console.log('THIS 2nd IF');
                action.setParams({
                    'regionVal': controllerValueKey,
                    'countryVal': '',
                    'productVal': '',
                    'string4': '',
                    'string5': 'secondtime'
                });
            }
            if(controllerValueKey != null && controllerValueKey != '--- None ---' && countryValue != null && countryValue != '--- None ---' && productValue != null && productValue != '--- None ---'){
                console.log('THAT IF');
                action.setParams({
                    'regionVal': controllerValueKey,
                    'countryVal': countryValue,
                    'productVal': productValue,
                    'string4': '',
                    'string5': 'secondtime'
                });
            }
            //set callback   
            var self = this;
            action.setCallback(this, function(response) {
                if (component.isValid() && response.getState() == "SUCCESS") {
                    console.log('#################');
                    var eventArr = response.getReturnValue();
                    self.jsLoaded(component, eventArr, 'normal');
                    //component.set("v.Resources", response.getReturnValue());
                }
            });
            $A.enqueueAction(action);

        }
    },

    getReasource: function(component, event) {
        var action = component.get("c.selectedPicklistValues");
        action.setParams({
                    'regionVal': '',
                    'countryVal': '',
                    'productVal': '',
                    'string4': 'normal',
                    'string5': ''
                });
        var self = this;
        console.log('First Time');
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {
                var eventArr = response.getReturnValue();
                self.jsLoaded(component, eventArr, 'normal');
                //component.set("v.Resources", response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    },
    
    jsLoaded: function(component, events, evt) {
        $(document).ready(function() {
            (function($) {
                "use strict";
                var tempR = events;
                var x = evt;
                var calFul='';
                var initialLocaleCode = 'en';
                var timeZone = 'GMT';
                var now = moment().add(moment.tz(timeZone).utcOffset(), "m");
                var now1 = moment().add(moment.tz(timeZone).utcOffset(), "m");
                //var now1 = moment.tz.setDefault(timeZone); //commented from original
                var localeSelectorEl = $("#locale-selector");
                var jsnResourcesArray = [];
                var jsnEventsArray = [];
                $('#calendar').fullCalendar('refetchEvents');
                if (x == 'normal') {
                    console.log(x);
                    calFul = $("#calendar");
                    component.set('v.displayCal1', true);
                    console.log('tempR.length FIRST '+ tempR.length);
                    if (tempR.length > 0) {
                    for (var i = 0; i < tempR.length; i++) {
                        jsnResourcesArray.push({
                            'title': tempR[i].Name,
                            'id': i
                        });
                        console.log('jsnResourcesArray'+ jsnResourcesArray.length);
                        if (tempR[i].Instructor_In_Sessions__r != null) {
                            for (var k = 0; k < tempR[i].Instructor_In_Sessions__r.length; k++) {
                                if (tempR[i].Instructor_In_Sessions__r != null) {
                                    jsnEventsArray.push({
                                        'resourceId': i,
                                        'id': tempR[i].Instructor_In_Sessions__r[k].Sessions__r.Events__r.Id,
                                        'title': tempR[i].Instructor_In_Sessions__r[k].Sessions__r.Events__r.Name,
                                        'startlocal': tempR[i].Instructor_In_Sessions__r[k].Sessions__r.Local_Start_Time__c,
                                        'endlocal': tempR[i].Instructor_In_Sessions__r[k].Sessions__r.Local_End_Time__c,
                                        'start': $A.localizationService.formatDateTime(tempR[i].Instructor_In_Sessions__r[k].Start__c, "MMMM dd yyyy, hh:mm:ss a"),
                                        'end': $A.localizationService.formatDateTime(tempR[i].Instructor_In_Sessions__r[k].End__c, "MMMM dd yyyy, hh:mm:ss a"),
                                        'Description': 'Course : ' + tempR[i].Instructor_In_Sessions__r[k].Course_Name__c + '</br>' + 'Booked : ' + tempR[i].Instructor_In_Sessions__r[k].Sessions__r.Events__r.Booked__c,
                                        'color': myEventColor(tempR[i].Instructor_In_Sessions__r[k].Sessions__r.Events__r.Type__c),
                                    });
                                }

                            }
                        }
                    }
                }
                    $('#calendar').fullCalendar('refetchEvents');
                } 
                console.log('jsnResourcesArray'+ JSON.stringify(jsnResourcesArray));
                /* if (x == "normal") {*/
                    calFul.fullCalendar({
                        schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
                        defaultView: 'timelineMonth',
                        plugins: ['momentTimezone'],
                        locale: initialLocaleCode,
                        center: 'Event Calendar',
                        resourceAreaWidth: '12%',
                        resourceLabelText: 'Instructors',
                        //timeZone: now1,

                        timeFormat: 'HH:mm',
                        views: {

                        },
                        
                        eventMouseover: function(data, event, view) {
                            if (data.color === 'Green' || data.color === 'Blue') {
                                //var tooltip = '<div class="tooltiptopicevent slds-popover slds-popover_tooltip slds-nubbin_bottom-left" style="position:absolute;z-index:10001;color:white;padding:1%">' + 'Title ' + ': ' + data.title + '</br>' + 'Start LocalTime' + ': ' + data.startlocal + '</br>'+ 'End LocalTime' + ': ' + data.endlocal + '</br>' + 'Start ' + ': ' + $A.localizationService.formatDate(data.start, "MMMM dd yyyy, hh:mm:ss a") + '</br>' + 'End ' + ': ' + $A.localizationService.formatDate(data.end, "MMMM dd yyyy, hh:mm:ss a") + '</br>'+ data.Description + '</div>';

                                var tooltip = '<div class="tooltiptopicevent slds-popover slds-popover_tooltip slds-nubbin_bottom-left" style="position:absolute;z-index:10001;color:white;padding:1%">' + 'Title ' + ': ' + data.title + '</br>' + 'Start LocalTime' + ': ' + data.startlocal + '</br>' + 'End LocalTime' + ': ' + data.endlocal + '</br>' + data.Description + '</div>';

                                $("body").append(tooltip);
                                $(this).mouseover(function(e) {
                                    $(this).css('z-index', 10000);
                                    $('.tooltiptopicevent').fadeIn('400', 'linear');
                                    $('.tooltiptopicevent').fadeTo('10', 1.9);
                                }).mousemove(function(e) {
                                    $('.tooltiptopicevent').css('top', e.pageY + -140);
                                    $('.tooltiptopicevent').css('left', e.pageX + 10);
                                });
                            }
                        },
                        eventMouseout: function(data, event, view) {
                            $(this).css('z-index', 8);
                            $('.tooltiptopicevent').remove();
                        },
                        eventRender: function(event, el) {
                            // render the timezone offset below the event title
                            if (event.start.hasZone()) {
                                el.find('.fc-title').after(
                                    $('<div class="tzo"/>').text(event.start.format('Z'))
                                );
                            }
                        },

                        resources: jsnResourcesArray,
                        events: jsnEventsArray,
                        
                        eventClick: function(event) {
                            component.set('v.isModalOpen', true);
                            var eventId = event.id;
                            component.set('v.sessionVal', eventId);
                        }
                    });
              /*  } */
              calFul.fullCalendar('refetchEvents'); 
            })(jQuery);
        });

        function myEventColor(status) {
            if (status === 'Private') {
                return 'Green';
            } else if (status === 'Public') {
                return 'Blue';
            } else if (status === 'HOLIDAY') {
                return 'Red';
            } else { //Cancelled
                return '#ff0000';
            }
        }
    },
})


 
SwethaSwetha (Salesforce Developers) 
HI Ravinder,
I believe the issue is Fullcalendar refetchEvents not working. The below posts might help
https://stackoverflow.com/questions/23006464/angularjs-ui-calendar-not-updating-events-on-calendar
https://www.xspdf.com/resolution/55929421.html
https://developer.salesforce.com/forums/?id=9060G000000I3QLQA0

If this information helps, please mark the answer as best.Thank you