完整日历不会显示来自 AJAX 的事件
Full Calendar wont show events taken from AJAX
我需要使用 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>
我不确定从这里到哪里去
假设:
- 由于问题没有指定版本,我假设最新的稳定版本,4.4
- 我也会提供日期数组
为了所有工作,您需要更改日期格式,除非您 change the locale
如果您将日期作为字符串 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 指出的那样 the docs show 作为 (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>
起草答案
我需要使用 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>
我不确定从这里到哪里去
假设:
- 由于问题没有指定版本,我假设最新的稳定版本,4.4
- 我也会提供日期数组
为了所有工作,您需要更改日期格式,除非您 change the locale
如果您将日期作为字符串 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 指出的那样 the docs show 作为 (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>