javascript - fullCalendar不会渲染变量数组中的事件

我将事件格式化为变量，并将其命名为events，如下所示（列出了3个事件，每个事件均带有title，start和end）

[
  {title : 'workout',  start : '2018-01-02T15:00:00', end : '2018-01-02T16:00:00'},
  {title : 'workout3', start : '2018-01-04T15:30:00', end : '2018-01-04T16:30:00'},
  {title : 'workout',  start : '2018-01-03T1:30:00',  end : '2018-01-03T1:50:00'}
]

当我使用events将events: events变量传递到日历时，不显示事件。

在JavaScript中，如果我只是简单地将变量events提醒到屏幕上并将其作为events变量复制/粘贴到我的代码中，则所有事件都会正确显示在日历中。

为什么日历中不会出现相同格式的相同数据？如何获取变量中的数据以进行渲染？

码：

$(document).ready(function() {
  var events1 = [];
  $('#caltable tbody>tr').each(function () {
    table_row_data = [];
    $('td', this).each(function () {
      table_row_data.push($(this).text());
    });
    if (table_row_data.length > 0) { // Only add a row if it's not empty
      events1.push("{"+table_row_data+"}");
    }
  });
  var events = "["+events1+"]"
  alert(events);

最佳答案

我假设您在异步调用后添加事件时遇到问题。

因为初始化fullcalendar使用以下命令可以完美地工作：

$('#calendar').fullCalendar({'events': [...]});

对于异步调用，您可以附加事件addEventSource以以编程方式添加事件。

看一下以下代码片段：

let myEvents = [{
    title: 'event1',
    start: '2018-01-01'
  },
  {
    title: 'event2',
    start: '2018-01-05',
    end: '2018-01-07'
  },
  {
    title: 'event3',
    start: '2018-01-09T12:30:00',
    allDay: false // will make the time show
  }
];

$('#calendar').fullCalendar();

//Simulate an async call
setTimeout(function() {
  $('#calendar').fullCalendar('addEventSource', myEvents);
}, 2000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.js"></script>


<div id='calendar'></div>