javascript - FULLCALENDAR: display events from 2 sources

I use one source from PHP and it's work thine ! (i'm on fullcalendar v3)

> $('#calendar').fullCalendar({
    events: {
        url: myevents.php,
        type: 'GET',
        data: {
            param: parametreFilter
        },
    },
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    lazyFetching: false,
    editable: true,
    droppable: true, ...

Now i would like to add events from another source. A gouvernemental API that display holidays. So i tried a lot of things and nothing works:

$('#calendar').fullCalendar({
        eventSources:[
            // your event source
            {
                url: 'https://calendrier.api.gouv.fr/jours-feries/metropole.json',
                type: 'GET',

            },
            {
                url: myevents.php,
                type: 'GET',
                data: {
                    param: parametreFilter
                }
            },

        ],
        eventDataTransform:function(eventData){
            console.log("YEP: " + JSON.stringify(eventData)); /* I tried this but the source from API never come in that function */

            return eventData;
        },
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        lazyFetching: false,
        editable: true,
        droppable: true,
        dragScroll: true,
        defaultView: 'agendaWeek',...

I saw this too: https://codepen.io/acerix/pen/EQePxq?editors=0010 But i can't apply it to my example.

I forgot something: I wrote a function to format the events from API, but i think that when i use it, the fullcalendar render is already finish before i get the events from API and reformat them. So its never displayed.

myholidays = []
function getHolidays(url) {
        fetch(url)
            .then(function(res) {
                if (res.ok) {
                    return res.json().then(function(days) {
                        /*console.log(jours)*/
                        let i = 0
                        let holidays = []
                        for (const day in days) {
                            /*console.log(`${day}: ${days[day]}`);*/
                            holidays.push({ "title": days[day], "start":day+'T00:00:00', "allDay": true})
                            i++
                        }

                        myholidays.push.apply(feries,joursferies)
                        $('#calendar').fullCalendar( 'refetchEvents' );
                    })
                }
                else{
                    console.log("Error")
                }
            })
            .catch(function(err) {
                alert("Error: " + err)
            });
    }

Can you please help ?

Solution:

The data at https://calendrier.api.gouv.fr/jours-feries/metropole.json is not an array containing objects in fullCalendar's event format so it will never display them.

You need to use the events-as-a-function option to download the data via your own AJAX request, and then process it into the correct format:

Your attempt above had one or two little mistakes in it, and also doesn't actually insert anything to the calendar, but it was a useful basis for a working solution:

eventSources: [
  function (start, end, timezone, callback) {
    fetch("https://calendrier.api.gouv.fr/jours-feries/metropole.json")
      .then((response) => response.json())
      .then(function (data) {
        let holidays = [];

        for (const day in data) {
          holidays.push({
            title: data[day],
            start: day,
            allDay: true
          });
        }
        callback(holidays);
      });
  },
  {
    url: "myevents.php",
    type: "GET",
    data: {
      param: parametreFilter
    }
  }
]

Demo: https://codepen.io/ADyson82/pen/eYvzqOp?editable=true&editors=001