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'})
                            
                        });
                    }

                });
            }
        });

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'})
                            
                        });
                    }

                });
            }
        });

• javascript
• axios
• fullcalendar
• fullcalendar-5

• You say in some situations I receive an error...but then the two cases you mention are 1) when no results are returned, and 2) when results are returned. This sounds like all situations (aside from the axios request failing entirely of course). Are there some other scenarios where it doesn't happen? It's hard to imagine what they would be. So are you really saying you always get this error? The way you describe the problem is a little bit confusing. – ADyson Commented Nov 19, 2024 at 10:47
• if I'm not mistake your .catch(function(err){ is in the wrong place as well. It looks like it's attached to the successCallback function call, but that doesn't return a Promise. Surely it's supposed to be attached to the smartAxios.get call? – ADyson Commented Nov 19, 2024 at 11:15

1 Answer 1

First let's see the error:

TypeError: successCallback(...) is undefined

the error means that you are trying to call (call as function) a variable that is actually undefined

now let's see the source of the variable: function (info, successCallback, failureCallback)

it is from a parameter, we don't have control over how it is passed, so maybe it is not passed as undefined in some cases now to the solution: you can do this to call it only when it exists: successCallback?.()