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

Question

我在一个名为 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);

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>

Answer 2

我遇到了同样的问题，因为我在事件时间("开始"/"结束"(中使用了momentJS对象，并且必须将其转换为ISO字符串(例如：moment(startTime).toISOString()(才能使其工作。

希望对你有帮助