Question

这是我的代码

$(document).ready(function() {
  var dates = "{title  : 'event1',start  : '2018-07-10'},{title  : 'event2',start  : '2010-07-18'}";

  dates = JSON.parse(dates);
  alert(dates);

  $('#calendar').fullCalendar({
    height: 450,
    defaultView: 'month',
    events: dates
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" />
<div id="calendar"></div>

我需要将dates变量传递给完整的日历事件。请帮助

Answer 1

您需要将事件数据作为数组传递。目前，您正在传递一个对象。不用将日期写成字符串，只需将数组手动写入构造函数的events属性中，如下所示：

$(function() {
    $('#calendar').fullCalendar({
        height: 450,
        defaultView: 'month',
        events: [
            {
                title: 'event1',
                start: '2018-07-10'
            },
            {
                title: 'event2',
                start: '2010-07-18'
            }
        ]
    });
});

您可以阅读有关在FullCalendar docs中添加事件的更多信息。

或者，如果您必须使用JSON.parse()，只需将字符串包装在方括号中即可。

var dates = JSON.parse('[{"title": "event1","start": "2018-07-10"},{"title": "event2","start": "2010-07-18"}]');

Answer 2

您的JSON无效，因为它只是对象列表，它们之间没有链接。您可以使用https://jsonlint.com/来验证JSON字符串。这导致您在尝试解析它时遇到错误，因为您无法将一系列对象更改为单个变量。您的字段名称和值也需要用双引号引起来，因此您需要将字符串用单引号引起来。除此之外，fullCalendar还需要事件的 array 数组，这是解析为变量的有效内容。

尝试一下：

$(document).ready(function() {
   var dates = '[{"title": "event1", "start": "2018-07-10"},{"title": "event2","start": "2010-07-18"}]';
  dates = JSON.parse(dates);

  $('#calendar').fullCalendar({
    height: 450,
    defaultView: 'month',
    events: dates
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" />
<div id="calendar"></div>

或者，如果您使用JavaScript生成事件数据，则可以直接构建JavaScript对象：

$(document).ready(function() {
   var dates = [{"title": "event1", "start": "2018-07-10"},{"title": "event2","start": "2010-07-18"}];

  $('#calendar').fullCalendar({
    height: 450,
    defaultView: 'month',
    events: dates
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" />
<div id="calendar"></div>

如何将变量传递给完整日历事件？

2 个答案: