Json URL Data -> no error, but no shown events

Viewed 43

I don't know what I'm doing wrong. Try to load events in FullCalendar over a URL in Json Format. See below [1]. This is the code in the HTML [2]. There is no event shown. The URL is working and also no error in console window. What could be the problem? Some mentioned a missing title information could be a reason for not showing up. But the title is defined.

[1]

HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
Server: Microsoft-IIS/10.0
X-Powered-By: ASP.NET
Date: Tue, 24 Nov 2020 16:43:15 GMT
Connection: close
Content-Length: 168

{
  "events": [
    {
      "title": "Event 1",
      "start": "2020-11-24T09:00:00",
      "end": "2020-11-24T10:00:00"
    },
    {
      "title": "Event 2",
      "start": "2020-11-02T14:00:00",
      "end": "2020-11-02T15:00:00"
    }
  ]
}

[2]

<head>
    <meta charset='utf-8' />
    <link href='js/fullcal/main.css' rel='stylesheet' />
    <script src='js/fullcal/main.js'></script>
    <script>

      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
          var calendar = new FullCalendar.Calendar(calendarEl, {
              initialView: 'listMonth',
             events: 'data/index',
            
            locale: 'de'
        });
        calendar.render();
      });

    </script>
</head>
<body>
    <div id='calendar'></div>
</body>
1 Answers

The JSON event data returned by the server must be just the array, without the outer object wrapper - fullCalendar doesn't know where inside your object to look for the array it needs. You must provide the array directly.

Using your sample data, the JSON response from your server should be like this:

[
    {
      "title": "Event 1",
      "start": "2020-11-24T09:00:00",
      "end": "2020-11-24T10:00:00"
    },
    {
      "title": "Event 2",
      "start": "2020-11-02T14:00:00",
      "end": "2020-11-02T15:00:00"
    }
]
Related