FULLCALENDAR：显示来自 2 个来源的事件

编程问答 2022-05-01

问题描述

我使用 PHP 的一个源代码，它对您有用！ （我在 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,...

现在我想从另一个来源添加事件。显示假期的政府 API。所以我尝试了很多东西，但没有任何效果：

$('#calendar').fullCalendar({
        eventSources:[
            // your event source
            {
                url: 'https://calendrier.api.gouv.fr/jours-feries/metropole.json',{
                url: myevents.PHP,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,agendaDay'
        },dragScroll: true,defaultview: 'agendaWeek',...

我也看到了这个：https://codepen.io/acerix/pen/EQePxq?editors=0010 但我不能将它应用到我的例子中。

我忘记了一些东西：我写了一个函数来格式化来自 API 的事件，但我认为当我使用它时，在我从 API 获取事件并重新格式化它们之前，fullcalendar 渲染已经完成。所以它从不显示。

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)
            });
    }

你能帮忙吗？

解决方法

https://calendrier.api.gouv.fr/jours-feries/metropole.json 处的数据不是包含 fullCalendar 的 event format 对象的数组，因此永远不会显示它们。

您需要使用 events-as-a-function 选项通过您自己的 AJAX 请求下载数据，然后将其处理成正确的格式：

您在上面的尝试中有一两个小错误，实际上也没有在日历中插入任何内容，但它是有效解决方案的有用基础：

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
    }
  }
]

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

apiapifullcalendarfullcalendar-3javascript