Cannot read property 'event' of undefined FullCalandar.js

Question

https://jsfiddle.net/studovey/jvrwfzea/21/

Im getting the following error in FullCalendar.js every time I select Day view I get this error. There is an event on the below date so it throws the error.

I thought that it could be something to do with the formatting perhaps. I have looked online for solution but to no avail.

Can anyone share any throughts?

My code is the following:

    function GetAppointments() {
        var initialLocaleCode = 'en';
        $('#calender').fullCalendar('destroy');
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next,today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            buttonText: {
                today: 'Today',
                month: 'Month',
                week: 'Week',
                day: 'Day'
            },
            footer: true,
            selectable: true,
            height: 650,
            events: function (start, end, timezone, callback) {
                $.ajax({
                    type: "GET",
                    contentType: "application/json",
                    url: '@Url.Action("GetAppointmentData", "Admin")',
                    dataType: "JSON",
                    selectable: true,
                    locale: 'en',
                    titleFormat: "YYYY-MM-DD HH:mm:ss",
                    success: function (data) {
                        var events = [];
                        $.each(data, function (i, data) {
       var start = data.start;
                            var end = data.end;
                            events.push({
                                eventID: data.Id,
                                title: data.title,
                                description: data.description,
                                start: start,
                                end: end,
                                backgroundColor: data.type.TypeColour,
                                textColor: 'white',
                                borderColor: 'white',
                                allDay: false,
                            });
                        });
                        callback(events);
                    }
                })
            },

            nextDayThreshold: '00:00:00',
            editable: true,
            droppale: true,
            nowIndicator: true,
            eventClick: function (info) {
                GetEventDetailByEventId(info);
            }
        });
        $(".fc-day-header").addClass("bg-success");
        $(".fc-day-header").css("color", "white");
        $(".fc-button, .fc-agendaWeek-button, .fc-state-hover").addClass("bg-success");


    }

        // Grab individual elements from the combined HTML string. Use each as the default rendering.
            // Then, compute the 'el' for each segment. An el might be null if the eventRender callback returned false.
            $(html).each(function (i, node) {
                var seg = segs[i];
                var el = view.resolveEventEl(seg.event, $(node));

                if (el) {
                    el.data('fc-seg', seg); // used by handlers
                    seg.el = el;
                    renderedSegs.push(seg);
                }
            });
        }

    function GetEventDetailByEventId(eventinfo) {
        $.ajax({
            type: "POST",
            url: '@Url.Action("GetAppointmentById", "Admin")',
            dataType: "JSON",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({
                'id': eventinfo.id
            }),

            success: function (data) {
                $('#appointmentHeader').removeClass('bg-success');
                $('#appointmentHeader').addClass('bg-info');
                $('#btnUpdate').removeClass('d-none');
                $('#btnDelete').removeClass('d-none');
                 $('#btnAdd').addClass('d-none');
                $('#headerText').html('Update Appointment');
                $('#btnBackAdd').removeClass('d-none');
                $('#txtTitle').val(data.Name);
                $('#txtName').val(data.Info);
                $('#txtStartDate').val(moment(data.StartTime).format("DD-MM-YYYY HH:mm"));
                $('#txtEndDate').val(moment(data.EndTime).format("DD-MM-YYYY HH:mm"));
                $('#hdnAppointmentId').val(data.Id);
                $('#drptype').val(data.type.Id);

            }
        })


    }

Answer 1

Did you check whether you are getting the expected values for data.StartTime and data.EndTime that you are passing into the function? The error event of undefined might be coming from moment. I faced that once.