Error when loading fullcalendar.io events - no data displayed

Question

I am trying to pull events from my database. After entering the function, when I want to show the events on the calendar, I can bring the data to the console in the events.push({}) event, but no data is visible on the calendar.

JavaScript code

function getByMeetings() {
    debugger;
    $.ajax({
        type: 'GET',
        url: '@Url.Action("GetMeetingList", "Meeting", new {area="admin" })',
        success: function (response) {
            debugger;
            events = [];
            var sources = calendar.getEventSources();
            for (var i = 0; i < sources.length; i++) {
                sources[i].remove();
            }
            for (var i = 0; i < response.length; i++) {
                console.log(response[i]);
                events.push({
                    id: response[i].Id,
                    title: response[i].Title,
                    requesting: response[i].Requesting,
                    organizer: response[i].Organizer,
                    start: moment(response[i].StartDate).format('DD/MM/YYYY HH:mm'),
                    end: moment(response[i].EndDate).format('DD/MM/YYYY HH:mm'),
                    description: response[i].Description,
                    linkUrl: response[i].LinkUrl,
                    meetingCategoryId: response[i].MeetingCategoryId
                });
            }
            calendar.addEventSource(events);
            debugger;
        },
        error: function () {
            $('#saveModal').modal('hide');
            toastr.error('bir sorun ile karşılaşıldı toplantılar şu an için takvime getirilemiyor.');
        }
    });
}

ASP.NET MVC Code:

public JsonResult GetMeetingList()
{
    var model = _db.GetDefaultRepo<Meeting>()
        .GetAll()
        .Select(s =>
            new MeetingItemViewModel
            {
                Id = s.Id,
                Title = s.Title,
                Description = s.Description,
                Requesting = s.Requesting,
                Organizer = s.Organizer,
                StartDate = s.StartDate,
                EndDate = s.EndDate,
                LinkUrl = s.LinkUrl,
                MeetingCategoryId = s.MeetingCategoryId
            }).AsEnumerable();

            return Json(model, JsonRequestBehavior.AllowGet);
            //return Json(model);
        }

Answer 1

fullCalendar doesn't accept date strings in DD/MM/YYYY format. One reason for this is because they're potentially ambiguous with the also-popular MM/DD/YYYY format...once it's just a string, it's impossible to tell whether 01/03/2021 is 1st March or 3rd January.

The accepted formats are listed in fullCalendar's Date Parsing documentation. If you're passing a string, then it accepts ISO8601-compatible strings, and that would include a format like YYYY-MM-DDTHH:mm (eg 2018-06-01T12:30 )

Changing your start and end definitions to

start: moment(response[i].StartDate).format('YYYY-MM-DDTHH:mm')
end: moment(response[i].EndDate).format('YYYY-MM-DDTHH:mm'),

should fix the problem (assuming you don't have any other JS errors which you haven't mentioned).

---

PS Adding and removing event sources all the time is a bit inefficient. I would suggest investigating fullCalendar's automated event feed functionality - see https://fullcalendar.io/docs/events-json-feed and https://fullcalendar.io/docs/events-function for the two approaches you can take. (It would certainly be neater if you simply made your C# code output the JSON in the correct format to begin with, rather than having to transform it again using JavaScript.)