在javascript上填充数据日历管理员

我正在尝试从模板引导adminlte3填充日历上的事件。在运行时，我总是收到错误消息，消息为加载资源失败：服务器响应状态为400（）。
这是我的source.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/[%7Title%20:%20%22全部%20天%20事件%201%22，开始%20:%20新%20日期（y，m，1），背景色%20:%20%22#f56954%22，边框色%20:%20%22#f56954%22，全天%20:%20%22真实%22}，{title%20:%20%22全部%20天%20事件%202%22，开始%20:%20新%20日期（y，m，2），背景色%20:%20%22 3554%F56922，全天%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，全天%20:%20%22true%22}，{title%20:%20%20all%20day%20event%204%22，start%20:%20new 20date（y，m，4），backgroundcolor%20:%20 355422#f56922，bordercolor%54%22，全天%20:%20%22true%22}，{标题%20:%20%22all%20day%20event%205%22，开始%20:%20新的%20date（y，m，5），背景色%20:%20%22#f56954%22，边框色%20:%20%22#f56954%22，全天%20:%20%22true%22}]？开始=2021-06-27t00%3a00%3a00%3a00%3a00%2b07%3a00&end=2021-08-083A000%2b07%3A000%
之后，我尝试json.parse（fillcalendar），错误消息是位置41处json中的意外标记e

如果您使用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

在javascript上填充数据日历管理员

1条答案

相关问题

热门标签

最新问答