使用FullCalendar显示事件数组

问题描述

我使用FullCalendar使用以下脚本：

  var calendarEl = document.getElementById('calendar');

  var bookingsEl = document.getElementById('bookings');

  var bookings = bookingsEl.innerText;
  var bookings = "["+bookings+"]"

  console.log(bookings);

  if(calendarEl) {

    var calendar = new Calendar(calendarEl,{
      plugins: [ dayGridPlugin ],firstDay: 1,height: 'auto',events: bookings,header: {
        left:   'prev',center: 'title',right:  'next'
      }
    });

  calendar.render();

}

console.log的{​​{1}}看起来像这样：

bookings

如果我将其复制并粘贴到[{start:"2020-08-12",end:"2020-08-25",rendering:"background"},{start:"2020-09-11",end:"2020-09-30",{start:"2020-08-26",end:"2020-08-28",rendering:"background"}] 设置中，则可以正常工作，但因为这样，我的日历中没有显示任何事件。

我不知所措下一步要使它起作用！任何帮助都将不胜感激。

解决方法

对，所以问题在于“ events”属性需要一个javascript数组，并且您正在向其传递一个字符串值，当您查看控制台输出时，该字符串值看起来类似于字符串数组。

因此，您需要将字符串转换为Javascript对象数组；根据显示的内容，“ bookingsEl.innerText”包含字符串形式的对象列表。所以我会尝试：

var bookings = JSON.parse("["+bookings+"]");

这会将JSON数组解析为javascript等效对象。注意：您的JSON字符串不是标准化的：对象属性也需要加引号，即{“ start”：“ 2020-08-12”，“ end”：“ 2020-08-25”，“ rendering”：“ background “}

奖金 数组和数组的字符串表示形式在JavaScript控制台中看起来有所不同。作为测试，请尝试以下操作：

var bookings = JSON.parse("["+bookings+"]");
console.log("This is a javascript array",bookings);
console.log("This is a string representation of an array","[" + bookingsEl.innerText + "]");

您应该看到它们在控制台中看起来完全不同...