时间戳

首页 > 解决方案 > 如何将变量传递给完整的日历事件？

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

问题描述

这是我的代码

$(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>

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

标签： javascriptfullcalendar

解决方案

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

尝试这个：

$(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>

推荐阅读