Question

我的ASP.NET应用程序生成事件，现在只需将它们存储在HTML列表中，如下所示：

<ul id="eventsList">
  <li>
    {editable:false,id:1,title:"Demo",start:"2018-03-14T00:00:00"}
  </li>
</ul>

我使用javascript将此列表转换为数组，如下所示：

var events = [];

$("#eventsList").find('li').each(function () {
  events.push(this.innerText);
});

$('#eventCalendar').fullCalendar({
  height: "parent",
  events: events
});

然而，FullCalendar不会显示任何事件 - 尽管事件在这里描述的数组中：https://fullcalendar.io/docs/events-array

我在这里缺少什么？

Answer 1

首先，当您使用innerText推送事件数据时，如下所示：

$("#eventsList").find('li').each(function () {
  events.push(this.innerText);
});

它实际上推送的是string，而不是Fullcalendar预期的object事件。

要解决此问题，您可以使用JSON.parse函数将JSON字符串解析为对象。但问题是，根据您的上述说明，<li>标记中的事件数据未正确引用。

{editable:false,id:1,title:"Demo",start:"2018-03-14T00:00:00"}

要成为有效的JSON字符串，必须正确引用属性名称，如editable，id，title和start。要解决此问题，您可以使用replace和一些正则表达式将引号括在属性名称周围：

var properJSONString = eventString.replace(/([a-z]+):/g, '"$1":')

因此，要将其包装起来，您可以按照<li>标记推送事件：

$(document).ready(function () {
  var events = [];

  // Loop through each list.
  $("#eventsList li").each(function () {
    // Get the event data, which is a string.
    var eventString = $(this).text().trim();
    // Properly quote the key (property name), so it's a valid JSON string.
    var jsonString = eventString.replace(/([a-z]+):/g, '"$1":');

    // Parse it to object with JSON.parse() and push it to events variable.
    events.push(JSON.parse(jsonString));
  });

  $('#calendar').fullCalendar({
    height: "parent",
    events: events
  });
});

您可以在此处查看演示：hopeful-franklin-085848.bitballoon.com

然而，这不是一个干净的解决方案。 FullCalendar已经提供了直接从服务器加载事件的功能。在此处阅读更多相关信息：events (as JSON Feed)。

希望这会给你一些想法。

FullCalendar.js不会显示数组中的JSON事件

1 个答案: