You need to sign in to do that
Don't have an account?
ravinder 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';
}
}
},
})
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';
}
}
},
})
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