完整日历不会显示从 AJAX 获取的事件

Question

>我需要使用 AJAX 从数据库中获取一些事件，并在我的完整日历中显示它们。问题是我的 JSON 提要没有start和end，但所有日期都被一个,分隔(例如：15-06-2020,16-06-2020(我希望使用.split(',')并从那里设置值，但无法让它工作。这就是我尝试过的

document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['dayGrid'],
editable: true,
firstDay: 1,
eventLimit: true,
events: function(start, end, callback) {
$.ajax({
type: "GET",
url: "http://localhost:8092/api/leavecal/getleavesbyemp/200027502420",
dataType: "json",
success: function(data) {
var eventsList = [];
var count = 0;
while (count < data.length) {
var dateArray = data[count].date.split(',');
var startDate = dateArray[0];
var endDate = dateArray[dateArray.length - 1];
eventsList.push({
start: startDate,
end: endDate
});
console.log(startDate + " " + endDate);
count++
}
callback(eventsList);
}
});
}
});
calendar.render();
});

<div id="calendar"></div>

我不确定从这里去哪里

Answer 1

假设：

• 由于问题没有指定版本，我将假设最新的稳定版本4.4
• 我还将提供日期数组

为了完成所有工作，您需要更改日期格式，除非您更改区域设置

如果您将日期作为字符串15-06-2020,16-06-2020，只需从中创建一个简单的数组并使用下面的代码

function convertToObjects(str) {
// str = "15-06-2020,16-06-2020"
return str.split(',').map(function(elm) { return { date: elm }; })
}

事件签名在您的代码中不正确，它应该是，正如@ADyson指出的那样，文档显示为(info, successCallback, failureCallback)，您将事件数组传递到successCallback([])或任何错误传递到failureCallback(new Error('Not good!'))中，info是您可以获取请求的数据范围的地方。

function getAllEvents(info, successCallback, failureCallback) {
const data = [
{ date: '15-06-2020' },
{ date: '16-06-2020' }
];
// const data = convertToObjects(<your string of dates>);
successCallback(processData(data));
}
function processData (arr) {
// [{date;'15-06-2020'},{date:'16-06-2020'}]
const eventsList = [];
arr.forEach(function(entry, i) {
// 15-06-2020 -> 2020-06-15
const dt = entry.date;
const formattedDate = `${dt.substr(6,4)}-${dt.substr(3,2)}-${dt.substr(0,2)}`;
eventsList.push({
id: `evt-${i+1}`,
start: formattedDate,
end: formattedDate,
title: `Event #${i+1}`
});
});
return eventsList;
}
document.addEventListener("DOMContentLoaded", function () {
const calendarEl = document.getElementById("calendar");
const calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['dayGrid'],
editable: true,
firstDay: 1,
eventLimit: true,
events: getAllEvents,
});
calendar.render();
});

<!-- CSS -->
<link href="https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.css" rel="stylesheet"/>
<link href="https://unpkg.com/@fullcalendar/core@4.4.0/main.min.css" rel="stylesheet"/>
<!-- JS -->
<script src="https://unpkg.com/@fullcalendar/core@4.4.0/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.js"></script>
<div id="calendar"></div>

首先起草 https://codepen.io/balexandre/pen/NWxRGGd?editors=1010 创建的答案