FULLCALENDAR:显示来自两个来源的事件

Question

我使用一个来自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',
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',...

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

我忘了一件事：我写了一个函数来格式化API中的事件，但我认为当我使用它时，在我从API获取事件并重新格式化它们之前，完整日历渲染已经完成。所以它从未展示过。

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

你能帮忙吗？

Answer 1

https://calendrier.api.gouv.fr/jours-feries/metropole.json不是包含fullCalendar事件格式的对象的数组，因此它永远不会显示这些对象。

您需要使用events-as-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