在 Javascript 上填写数据日历 AdminLte

Question

我正在尝试通过模板 bootstrap 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,start%20:%20new%20Date(y,m,1),backgroundColor% 20:%20%22#f56954%22,borderColor%20:%20%22#f56954%22,allDay%20:%20%22true%22},{title%20:%20%22All%20Day%20Event% 202%22,start%20:%20new%20Date(y,m,2),backgroundColor%20:%20%22#f56954%22,borderColor%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%22#f56954%22,allDay%20:%20%22true%22},{title%20:%20%22All%20Day%20Event%204%22,start% 20:%20new%20Date(y,m,4),backgroundColor%20:%20%22#f56954%22,borderColor%20:%20%22#f56954%22,allDay%20:%20%22true%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}]?start=2021-06-27T00%3A00%3A00%2B07%3A00&end=2021-08-08T00%3A00%3A00 %2B07%3A00

之后，我尝试 JSON.parse(fillcalendar)，错误消息是 unexpected token e in json at position 41

Answer 1

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

(N.B。您在控制台中看到的是因为您向 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

在 Javascript 上填写数据日历 AdminLte

fill data Calendar AdminLte on Javascript

javascript

arrays

json

fullcalendar

adminlte