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

Share Improve this question Follow edited Nov 19, 2024 at 10:41 ADyson 62.2k1616 gold badges7979 silver badges9292 bronze badges asked Nov 16, 2024 at 14:16 Lelio FaietaLelio Faieta 6,69699 gold badges4848 silver badges8484 bronze badges 2

• 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

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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?.()

---