在Javascript上填充数据日历管理

Question

我正在尝试从模板引导程序AdminLte3中填充日历上的事件。当我运行它时，总是会收到错误消息加载资源失败：服务器的响应状态为400((。

这是我的源代码.js(它是根据模板编辑的(。

$(document).ready(function () {
/* initialize the calendar
-----------------------------------------------------------------*/
//Date for the calendar events (dummy data)
var date = new Date()
var d    = date.getDate(),
m    = date.getMonth(),
y    = date.getFullYear()
var Calendar = FullCalendar.Calendar;
var calendarEl = document.getElementById('calendar');
var fillcalendar = '[';
for (let i = 1; i < 6; i++)
{
fillcalendar += '{';
fillcalendar +=  'title : "All Day Event '+i+'",';
fillcalendar +=  'start : new'+' '+'Date(y,m,'+i+'),';
fillcalendar +=  'backgroundColor : "#f56954",' ; //red '#f56954'
fillcalendar +=  'borderColor : "#f56954",';
fillcalendar +=  'allDay : "true"';
if(i != 5){fillcalendar += '},';}
else{fillcalendar += '}' ;}
}
fillcalendar += ']';
var calendar = new Calendar(calendarEl, {
headerToolbar: {
left  : 'prev,next today',
center: 'title',
right : 'dayGridMonth'
},
themeSystem: 'bootstrap',
//custom fill
events: fillcalendar,
editable  : true,
droppable : true, // this allows things to be dropped onto the calendar !!!
drop      : function(info) {
// is the "remove after drop" checkbox checked?
if (checkbox.checked) {
// if so, remove the element from the "Draggable Events" list
info.draggedEl.parentNode.removeChild(info.draggedEl);
}
}
});
calendar.render();
});

我在浏览器控制台上检查变量fillcalendar，它用填充

http://localhost:8083/[%7Btitle%20:%20%22All%20Day%20Event%201%22，开始%20:%20new%20Date(y，m，1(，backgroundColor%20:%22#f56954%22，borderColor%20:%20w22#f56954%22，allDay%20:%20%22true%22}，｛title%20:%20%22All%20Day%20Event%02%22，开始%20:%20new%20Date 20:%20%22#f56954%22，allDay%20:%20%22true%22}，｛title%20:%20%22All%20Day%20Event%203%22，start%20:%20new%20Date(y，m，3(，backgroundColor%20:%20%22#f56954%22，borderColor%20:%20#f56954%22，allDay%20:%20wtrue%22｝，｛title%20:%20%22All%20Day%20Event%204%22，start%20:%20pnew%20Date(y，m，4(，backbackgroundColor%40:%20%22#f56954%22，bounderColor%40:%20%22#f569五十四%22，allDay%20:%20Ctrue%22｝，｛title%20:%20%22All%20Day%20Event%205%22，start%20:%20new%20Date(y，m，5(，backgroundColor%20:%20%22#f56954%22，borderColor%20:%20%22#f56954%22，allDay%20:%20/22true%22｝]？开始＝2021-06-27T00%3A00%3700%2B07%3A00&end=2021-08-08T00%3A00%3300%2B07%3A00

之后，我尝试JSON.parse(fillcalendar(，错误消息是位置41处JSON中的意外令牌e

Answer 1

如果您使用JavaScript为fullalendar创建这样的事件列表，那么您传递给fullCalendar的需要是一个数组，而不是字符串。尝试构建一个字符串，然后将其解析为JSON也没有意义——正如您所发现的，手工制作自己的JSON很容易出错。

(注意：你在控制台中看到的是，因为你向fullCalendar传递了一个字符串，它假设它是一个应该从中获取事件的URL，并试图向它发出AJAX请求。但这个URL当然是无稽之谈，所以它失败了。(

自然构建阵列会更有意义(同时更容易编码，更容易读取、调试和维护(：

var fillcalendar = [];
for (let i = 1; i < 6; i++)
{
fillcalendar.push({
title: "All Day Event " + i,
start: new Date(y, m, i),
backgroundColor: "#f56954",
borderColor: "#f56954",
allDay: true
});
}

工作演示：https://codepen.io/ADyson82/pen/QWvEovw