我需要使用AJAX从DB获取一些事件，并在我的完整日历中显示它们。 问题是，我的JSON提要没有start和end，但是所有的日期都用，(例如:15-06-2020，16-06-2020)分隔，我希望使用.split('，')并从那里设置值，但是无法使其工作。 这就是我试过的
null
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>null
我不知道从这里到哪里去
假设:
为了所有工作，您将需要更改日期格式，除非您更改区域设置
如果您以字符串形式获取日期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（新错误('不好！'))中，而info是您可以获取请求的数据范围的地方。
null
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>