Fullcalendar's eventSources option value from PHP Ajax

Question

I am using Fullcalendar V4. I am getting a problem with the eventSources option with PHP Ajax.

In Javascript I am using :

var eventSource = "data.php?value1=" + item_id;
calendar.addEventSource(eventSource);

From PHP I am sending :

echo '[{"id":"1","title":"All Day Event1","start":"2019-08-02","backgroundColor":"red"},{"id":"2","title":"All Day Eventssss2","start":"2019-08-04"},{"id":"3","title":"All Day Eventssss3","start":"2019-08-06"},{"id":"4","title":"All Day Eventssss4","start":"2019-08-08"}]';

This is working properly.

Now I want to use the option of eventSources, which is described here: https://fullcalendar.io/docs/event-source-object

For this, I am sending from PHP :

echo '[{"events" : [{"title" : "event1", "start" : "2019-08-01"},{"title" : "event2", "start" : "2019-08-05"}],"color" : "black"}]';

But this is not working. No error is showing in the console.

Please help!

Answer 1

You have misunderstood, that's not how the event sources feature works. The idea of event sources is to define multiple different sources from which to download event data. Each source can have its own properties as well, defined by creating an event source object - but this is something you do in the JavaScript code, not in the server-side JSON.

The server-side JSON is just used to create the array of actual events, not the data about the event source. The event source defines (among other things) the place to get the events from (i.e. the URL on the server), so it's not logical to wait until that URL is visited before defining the event source - it's too late by then.

Here's how you define an event source object correctly:

var eventSource = {
  "id": 1, 
  "url": "data.php?value1=" + item_id,
  "color" : "black"
}
calendar.addEventSource(eventSource);