Search code examples
asp.net-mvcmodel-view-controllerfullcalendarfullcalendar-5

Fullcalendar Not Displaying Events MVC

I have made a test page using the latest fullcalendar on a test page but it won't display the events in the calendar, any ideas?

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Cal</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/main.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/main.min.css">
    <script>

        document.addEventListener('DOMContentLoaded', function () {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                events: 'CalEvents/'
            });
            calendar.render();
        });

    </script>
</head>
<body>
    <div id='calendar'></div>
</body>
</html>

This is the controller code:

public ActionResult Cal()
{
   return View();
}

public JsonResult CalEvents()
{
   using (_context)
   {
       var events = _context.CalendarEventsNews.ToList();
       return Json(events.ToArray(), JsonRequestBehavior.AllowGet);

   }
}

This is the response:

[{"id":1,"eventName":"Test","eventDescription":"Testing Description","eventLocation":"UK","startDate":"\/Date(1633561200000)\/","endDate":"\/Date(1633730400000)\/","allDay":false}]
Solution

  • As ADyson had pointed out the issue was me simply not going through the documentation correctly. Field names changed and working fine now.

    Thanks again ADyson for pointing out the issue.