CODEWITHSUNDEEP
javascriptjsonajaxfullcalendarfullcalendar-4
MinionAttack
MinionAttack

Reputation: 540

FullCalendar doesn't display events fetched via JSON with Dynamic 'extraParams' parameter

I'm having problems dislaying events fetched via JSON with Dynamic 'extraParams' parameter as explained here in the Docs:

var calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl, {
...,
events: {
    url: '/getEvents',
    method: 'POST',
    extraParams: function() {
        var combobox = document.getElementById('combobox');
        var value = combobox.options[combobox.selectedIndex].value;
        return {client: value};
    },
    failure: function(error) {
        console.log(error);
        alert("Error", "Unable to fetch events", "red");
    },
},
...
});
calendar.render();

On the debug panel, I can see the request made by FullCalendar:

XHR POST https://127.0.0.1:8443/getEvents

With this params:

client: All
start: 2019-09-30T00:00:00Z
end: 2019-11-11T00:00:00Z
timeZone: UTC

And the response:

{
  "error": "", 
  "events": [
    {
      "allDay": 1, 
      "color": "blue", 
      "end": "2019-10-24T00:00:00.000Z", 
      "extendedProps": {
        "company": "Company 1", 
        "state": "Active", 
        "type": "task"
      }, 
      "groupId": "48", 
      "id": 27, 
      "start": "2019-10-23T00:00:00.000Z", 
      "title": "Title 1", 
      "url": ""
    }, 
    {
      "allDay": 1, 
      "color": "blue", 
      "end": "2019-11-07T00:00:00.000Z", 
      "endpoints": 0, 
      "extendedProps": {
        "company": "All", 
        "description": "Description", 
        "creationDate": "2019-11-04", 
        "state": "Active", 
        "tecnology": "test", 
        "element": "test 1", 
        "type": "type 2", 
        "user": "user 1", 
        "version": "1.2"
      }, 
      "id": 76, 
      "start": "2019-11-04T00:00:00.000Z", 
      "title": "Title 2", 
      "url": ""
    }
  ]
}

But FullCalendar doesn't display this two received events. I don't know what I'm doing wrong.

Regards.

Upvotes: 1

Views: 184

Answers (1)

ADyson
ADyson

Reputation: 61849

This is happening because your server must return a simple array containing only the events, and nothing else. You're returning a complex object. FullCalendar does not know how to unpack your object and find the "events" property containing the relevant data.

You need to return simply:

[
 {
  "allDay": 1, 
  "color": "blue", 
  "end": "2019-10-24T00:00:00.000Z", 
  "extendedProps": {
    "company": "Company 1", 
    "state": "Active", 
    "type": "task"
  }, 
  "groupId": "48", 
  "id": 27, 
  "start": "2019-10-23T00:00:00.000Z", 
  "title": "Title 1", 
  "url": ""
 }, 
 {
  "allDay": 1, 
  "color": "blue", 
  "end": "2019-11-07T00:00:00.000Z", 
  "endpoints": 0, 
  "extendedProps": {
    "company": "All", 
    "description": "Description", 
    "creationDate": "2019-11-04", 
    "state": "Active", 
    "tecnology": "test", 
    "element": "test 1", 
    "type": "type 2", 
    "user": "user 1", 
    "version": "1.2"
  }, 
  "id": 76, 
  "start": "2019-11-04T00:00:00.000Z", 
  "title": "Title 2", 
  "url": ""
 }
]

from your server, without the rest of it.

I must say that the fullCalendar documentation doesn't make this fact particularly clear.

N.B. I'd argue the "errors" property is superfluous anyway, in any JSON response. If there was an error, you should return a HTTP status code indicating the nature of the error, and a completely different response body indicating whatever you want to tell the user about the error. This would fire the "failure" callback in your JS and allow the browser code to respond appropriately.

Upvotes: 2

Related Questions