使用 JSON 在完整日历上呈现事件答案

【问题标题】：Render events on Full calendar using JSON使用 JSON 在完整日历上呈现事件
【发布时间】：2019-11-18 02:37:32
【问题描述】：

我正在尝试通过构建 JSON 对象并将其传递给完整日历上的事件处理程序来呈现完整日历 js 上的事件，代码如下所示：

$('#dailyPaymentsModal').on('show.bs.modal', function(event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var matrixId = button.data('id');
  var matrixprice = button.data('price');
  var qualifiedDate = button.data('qdate');
  var qDate = new Date(qualifiedDate);
  var tomorrow = new Date(qualifiedDate);
  var endDate = new Date(qualifiedDate);
  endDate.setDate(endDate.getDate() + 14);
  tomorrow.setDate(tomorrow.getDate() + 1);
  var nextDay = qDate;
  var myObject = new Object();
  var myarray = [];
  var dailybonus = matrixprice * 0.03;
  while (nextDay <= endDate) {
    myObject.title = 'Daily Bonus';
    myObject.start = nextday;
    myObject.description = dailybonus;
    myarray.push(myObject);
    nextDay.setDate(nextDay.getDate() + 1);
  }
  var myString = JSON.stringify(myarray);
  alert(myString);
  var calendar = $('#fcalendar').fullCalendar({
    events: myString,
    displayEventTime: false,
    eventRender: function(event, element) {
      element.find('.fc-title').text(event.title);
    }
  });
})

我在 myString 中得到一个 JSON 数组，但是当传递给完整日历上的事件时，它不会呈现任何事件。

【问题讨论】：

为什么要对数组进行字符串化？这个例子有一个数组 - fullcalendar.io/docs/v3/events-array
我用过 var myString = JSON.stringify(myarray);
fullCalendar 不需要 JSON，它需要一个实际的对象数组。如果你不明白 JSON 和 JavaScript 对象/数组字面量之间的区别，基本上是这样的：JSON 是文本，即 string。它是对象的表示，在存储数据或通过 Internet 传输数据时很有用。它不是 JavaScript 可以使用的实际对象或数组。当您在代码中硬编码对象时，它恰好具有类似于您在 JavaScript 中使用的语法的语法。但要真正在程序中使用 JSON，你必须先对其进行解码。

标签： jquery arrays json fullcalendar

【解决方案1】：

您不需要JSON.stringify(myarray);，只需删除该行并在事件中使用myarray。

// var myString = JSON.stringify(myarray);
// alert(myString);
var calendar = $('#fcalendar').fullCalendar({
   events: myarray,
   displayEventTime: false,
   eventRender: function(event, element) {
      element.find('.fc-title').text(event.title);
   }
});

注意 Fullcalendar 有一个非常好的演示，您可以简单地使用它们来构建您的演示。这是您可以使用的事件数据的演示。 https://codepen.io/nasser-ali-karimi/pen/YzzdxWg?editors=0010

【讨论】：