Show events in fullcalendar using ajax

Question

I am writing application on asp.net core 2.0. and trying to show events stored in DB in calendar. I have added links to js and css files as it is shown in documentation. As event source I am using events as function as it is shown in official documentation Fullcalendar Doc but my calendar does not show events. It is empty!

GetEvents method in Schedules controller which gets data from DB

    public ActionResult GetEvents()
    {
        return new JsonResult(Json(from events in _context.Schedules
                                   select new { id = events.ID,
                                                EventTitle = events.EmployeeID,
                                                ShiftDate = events.ShiftDate.Date } ));
    }

I also tried to modify ajax but it also does not work.

<div id="calendar"></div>

<script>
    $(document).ready(function () {
        $('#calendar').fullCalendar({
             events: function (start, end, timezone, callback) {
                $.ajax({
                    url: "/Schedules/GetEvents",
                    type: "POST",
                    dataType: "JSON",

                    success: function (result) {
                        var eventsList = [];
                        // alert(result);                 // --1--
                        // alert(JSON.stringify(result)); // --2--
                        $(result).each(function () {
                            var eventTitle = $(this).attr('EventTitle');
                            var eventStart = $(this).attr('ShiftDate');
                            var eventId = $(this).attr('id');
                            eventsList.push(
                                {
                                    id: eventId,
                                    title: eventTitle,
                                    start: eventStart
                                });
                        });
                        if (callback)
                            callback(eventsList);
                    }
                });
            }

        });
    });
</script>

First alert shows message [Object object]... , Second alert shows all selected data in a "JSON string". But calendar does not show anything. So, what am I doing wrong? Thank you!

Answer 1

Try this:

result.forEach(function (item) { 
  eventsList.push({ 
    id: item.id, title: item.EventTitle, start: item.ShiftDate 
  }) 
})