fullcalendar v5 after edit event render() don't refresh - fullcalendar

Question

when i edit a event list, it correctly reload but calendar don't refresh.
if i click in other tab and then return in calendar tab it refresh: problem with bootstrap? This is my function to init calendar
function getCalendar(mydate) {
//Date for the calendar events (dummy data)
var date = new Date()
var d = date.getDate(),
m = date.getMonth(),
y = date.getFullYear()
var calendar = FullCalendar.Calendar;
var calendarEl = document.getElementById('calendar');
var calEv=bindEvents(mydate);
//var calRi=bindResource(mydate);
dCal = new calendar(calendarEl, {
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
timeZone: 'UTC',
height: '100%',
contentHeight: 'auto',
initialView: 'dayGridMonth',
themeSystem: 'bootstrap',
locale: 'it',
//Random default events
//events: 'https://fullcalendar.io/demo-events.json',
//events: bindEvents(mydate),
//events: calEv,
//events: evUrl,
events: function(info, successCallback, failureCallback) {
var evUrl = window.apiurl+'/api/anagrafiche/tourfascecalevents/'+id_entita;
$.ajax(evUrl, {
type: 'GET',
cache: false,
}).done(function(dati) {
dbgConsole("render init ev");
dbgConsole(dati);
ev=bindEvents(dati);
dbgConsole(ev);
successCallback(ev);
}).fail(function(x,s,t) {
alert_error(x);
});
},
//resources: bindResource(mydate),
initialDate: dataIni,
editable : true,
selectable: true,
droppable : false, // this allows things to be dropped onto the calendar !!!
dateClick: function(info) {
dbgConsole(info);//event.setProp( name, value )
var cls=[];
var data_fine = moment(info.dateStr, "YYYY-MM-DD").add(gg_viaggio, 'days').format('YYYY-MM-DD');
if ('undefined' == typeof grpSelected || ''==grpSelected) {
// alert('Cancellazione data: ' + info.dateStr + ' !');
var reqUrl = window.apiurl+'/api/anagrafiche/tourfasce/'+id_entita;
$.ajax(reqUrl, {
type: 'DELETE',
cache: false,
data: {
id_gruppo: id_gruppo,
id_entita: id_entita,
MM_delete: 'form_fascedel',
data_inizio: info.dateStr
}
}).done(function(dati) {
window.tables['FasceTable'].setData();
dbgConsole("render");
//$('#h-tab').trigger('click');
//$('#dati-fasce-tab').trigger('click');
dCal.render();
//dCal.updateSize();
}).fail(function(x,s,t) {
alert_error(x);
});
} else {
// alert('Imposta data: ' + info.dateStr + ' in gruppo "'+grpSelected+'" !');
var reqUrl = window.apiurl+'/api/anagrafiche/tourfasce/'+id_entita;
$.ajax(reqUrl, {
type: 'PUT',
cache: false,
data: {
id_gruppo: id_gruppo,
id_entita: id_entita,
MM_update: 'form_fasceupd',
data_inizio: info.dateStr,
nome_periodo: grpSelected,
data_fine: data_fine
}
}).done(function(dati) {
window.tables['FasceTable'].setData();
dbgConsole("render");
//$('#h-tab').trigger('click');
//$('#dati-fasce-tab').trigger('click');
dCal.render();
//dCal.updateSize();
}).fail(function(x,s,t) {
alert_error(x);
});
}
// alert('Gruppo: ' + id_gruppo + ' - Entita: "'+id_entita+ ' - Giorni: "'+gg_viaggio+'" !');
//dCal.setOption('initialDate', '2021-06-01');
//dCal.render();
},
/*
eventClick: function(calEvent, jsEvent, view) {
var testo='';
testo=testo+'Servizio: ' + calEvent.title_serv+'\n';
testo=testo+'Inizio: ' + calEvent.start.format()+'\n';
testo=testo+'Fine: ' + calEvent.end.format()+'\n';
testo=testo+'Descrizione: ' + calEvent.title+'\n';
alert(testo);
}
*/
});
//dCal.render();
dbgConsole("Cal:")
dbgConsole(dCal);//event.setProp( name, value )
}
and this is activation
$('#dati-fasce-tab').on('shown.bs.tab', function (event) {
dCal.render();
})
after 'dateClick' events are modified and reloaded but calendar not update view
P.S.: all events are type 'background'
Already exists any different method to refresh?
We are a problem to refresh on load calendar in hidden area, any idea?

Answer 1

First of all, you need to render the fullcalendar element inside the initialize function.
function getCalendar(mydate) {
...
dCal = new calendar(calendarEl, {
});
dCal.render();
}
After that, you need to use refetchEvents function while an event like changing tab or save an event is firing.
https://fullcalendar.io/docs/Calendar-refetchEvents
dCal.refetchEvents();
You could face into an issue like dCal is undefined, then you need to add some handling like
if (typeof dCal !== 'undefined') {
dCal.refetchEvents();
}