javascript - fullCalendar 不会呈现变量数组中的事件

Question

我已将事件格式化并放在名为 events 的变量中，如下所示(列出了 3 个事件，每个事件都有 title、start 、结束)

[
  {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);

Answer 1

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

因为初始化 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>