ASP.Net Core MVC - FullCalendar - Events are not displayed

Question

Using FullCalendar 5.11.3 in my ASP.Net Core MVC application I have a problem that events aren't displayed.

On debugging one can see that on calendar initialization the controllers action is correctly called and also the data that is returned is correct and follows the requirements (https://fullcalendar.io/docs/event-source-object)

JSON that is returned when accessing action directly

[{"id":1,"title":"Beata Kowal","start":"13-09-2022","allDay":true}]

Calendar is placed in a partial view (as in the code below) and used in home view (in the future I plan to use it in several views with different data sources).

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            events: {
                url: '/Home/GetCalendarData',
                success: function() {
                    alert("ok");
                },
                failure: function() {
                    alert("error");
                }
            }
        });
        calendar.render();
    });
</script>

<div class="row">
    <div id='calendar' />
</div>

In the HomeController there is an action responsible for getting data to be used for displaying events

// GET: Home/GetCalendarData
public JsonResult GetCalendarData()
{
    List<Appointment> appointments = _context.Appointments
        .Include(app => app.Employee)
        .Include(app => app.Customer)
        .ToList();
    List<HomeIndexGetViewModel> appointmentsIndexViewModel = _mapper.Map<List<Appointment>, List<HomeIndexGetViewModel>>(appointments);
    return new JsonResult(appointmentsIndexViewModel);
}

Calendar is rendering and the alert on success is also displayed. What is more in the developer mode there are no errors or warnings. Yet, events still don't display.

My initial guess: It takes too long to fetch data from the database and before action returns its result calendar is rendered and events can't not longer be added. If so, then how can I change it to work in a desired way? Introduce JS callback?

Answer 1

The problem was with parsing the date. It was not capable to process the provided date format which was "dd-MM-yyyy". After changing to "yyyy-MM-dd HH:mm:ss" everything works fine and events are displayed correctly.