I am using fullCalendar 5.5.1 to display some events on screen. I fetch the data from the database and it is working as expected. The only issue I have is that in some situations I receive an error:
Uncaught (in promise) TypeError: successCallback(…) is undefined
It happens if the response from the database is empty but it also happens after fullCalendar parses all the data returned from the database (like it is not stopping after managing all the records).
To avoid the first to happen I put a check on the response length so that if it is 0 it stops parsing and it works fine but I don’t know how to avoid the other situation.
A sample of my data is (printed from console)
0: Object { title: "Evento di test 1 - 7 hours", start: "2024-06-01T22:00:00.000Z", duration: 7 }
1: Object { title: "Evento di test 2 - 3 hours", start: "2024-06-01T22:00:00.000Z", duration: 3 }
2: Object { title: "Evento di test 3 - 3 hours", start: "2024-06-06T22:00:00.000Z", duration: 3 }
3: Object { title: "Evento di test 4 - 7 hours", start: "2024-06-09T22:00:00.000Z", duration: 7 }
4: Object { title: "Evento di test 5 - 4 hours", start: "2024-06-20T22:00:00.000Z", duration: 4 }
5: Object { title: "Evento di test 6 - 6 hours", start: "2024-06-22T22:00:00.000Z", duration: 6 }
6: Object { title: "Evento di test 7 - 3 hours", start: "2024-06-28T22:00:00.000Z", duration: 3 }
While the code I am using is:
var calendar = new Calendar(calendarEl, {
timeZone: 'local',
customButtons: {
newEvent: {
text: 'New record',
click: function () {
alert('clicked the custom button!');
}
}
},
headerToolbar: {
right: 'prev,next today',
left: 'title',
center: 'newEvent',
//right: 'dayGridMonth,dayGridWeek,dayGridDay'
},
themeSystem: 'bootstrap',
defaultAllDay: true,
events: function (info, successCallback, failureCallback) {
let user = sessione.profilo.id;
let project = sessione.progettoAttivo.id;
//let start = info.start.valueOf();
//let end = info.end.valueOf();
let start = info.startStr;
let end = info.endStr;
smartAxios.get("/timesheet?user=" + user + "&project=" + project + "&start=" + start + "&end=" + end)
.then((response) => {
console.log(response.data);
let prevDate = '';
let totDuration = 0;
if(response.data.length==0){
console.log('no data for this month');
}else{
successCallback(
response.data.map(function (eventEl) {
console.log(eventEl);
return {
title: eventEl.title,
start: eventEl.start,
color: '#007bff',
textColor: 'white',
allDay: true
}
}),
response.data.forEach(function (element) {
let date = new Date(element.start);
let year = date.getFullYear();
let month = ((date.getMonth()+1).toString().length < 2) ? "0"+(date.getMonth()+1) : (date.getMonth()+1);
//let month = date.getMonth()+1;
let day = ((date.getDate()).toString().length < 2) ? "0"+(date.getDate()) : (date.getDate());
//let day = date.getDate();
date= year+'-'+month+'-'+day;
if (date == prevDate) {
totDuration = totDuration + element.duration;
} else {
prevDate = date;
totDuration = element.duration;
}
if (totDuration > 8) {
$('#calendar').find('.fc-day[data-date="' + date + '"]').css('background-color', '#FAA732');
}
console.log(prevDate, totDuration);
})
)
.catch(function(err){
console.log(err)
$(document).Toasts('create', { autohide: true, delay: 750, title: 'Timesheet',class: 'bg-danger', body:'Error trying to retrieve data'})
});
}
});
}
});