Fullcalendar使用变量添加事件

Question

我在使用eventString将事件添加到fullcalendar时遇到问题。我不知道我做错了什么。

<script>
$(document).ready(function() {

    var value=<?php echo $_SESSION['calAvail']; ?>;
    console.log(value);
    var eventString = "[{";
    console.log(value.endDate[0].substring(11,16));
    for(var i = 0, max = value.endDate.length; i < max; i++) {
        if( i != value.endDate.length-1) {
            eventString += "title:" + "\"" + value.title[i] + "\", ";
            eventString += "start:" + "\"" + value.startDate[i].substring(11,16) + "\", ";
            eventString += "end: " + "\"" + value.endDate[i].substring(11,16) + "\", ";
            eventString += "dow: [" + value.day[i] + "] },{ ";
        } else {
            eventString += "title: " + "\"" + value.title[i] + "\", ";
            eventString += "start:" + "\"" + value.startDate[i].substring(11,16) + "\", ";
            eventString += "end: " + "\"" + value.endDate[i].substring(11,16) + "\", ";
            eventString += "dow: [" + value.day[i] + "] ";
        }

    }
    eventString += "}]"; 

    console.log(eventString);
    var eventShow = eventString;

    $('#calendar').fullCalendar({
        defaultDate: moment(),
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultView: 'month',
        events: eventString
    })
});
</script>


<script type="text/javascript">
    function userInfoChange() {
        window.location = "http://localhost/TisTheSeason/profile_user_edit.php";
    }
</script>

所以首先我创建一个基于json的字符串，其中包含title，start，end字段。我的计划是动态提取json中的信息，然后对其进行格式化，使其遵循：

[{ "title": "", "start": "", "end": "" }]

我这样做但我似乎无法将变量放在事件中：

Answer 1

在events属性中，fullCalendar预计会被给予

a）JavaScript变量 - 必须是包含一系列事件对象（documentation）的数组，或者

b）从中可以下载JSON字符串的URL，然后它将自动解析为包含事件对象的JavaScript数组（documentation），或者

c）与b）执行相同过程但使用自定义数据源（documentation）的函数。

您的代码似乎正在尝试实现选项a），但您不是从数据创建JavaScript数组，而是创建包含字符串的变量（即一些纯文本）。该字符串看起来像JSON，但它仍然是一个字符串。它不是一个数组。 FullCalendar不期待这个。它不是一个可用的数据结构。为了可以使用，首先必须将它解析并转换为数组，然后再将其提供给fullCalendar。

这通常是你实现的选项c）（在选项b中），fullCalendar将代表你做这部分），但它不适用于选项a）。

现在......你正在使用JavaScript来创建这个变量，因此通过在代码中声明它来直接创建所需的JavaScript数组会更有意义。使用JavaScript创建一个字符串然后再将它解析回JavaScript数组只是一个毫无意义的额外步骤。 （此外，像这样手工构建JSON字符串非常容易受到意外语法错误的注入，并且在任何情况下都不应该尝试。如果您确实需要创建JSON，那么请使用合适的代码库来执行此操作。）

$(document).ready(function() {
  var value= <?php echo $_SESSION['calAvail']; ?>;
  var eventList = []; //declare an array, not a string!

  for(var i = 0; i < value.endDate.length; i++) {
    var event = { 
      "title": value.title[i], 
      "start": value.startDate[i].substring(11,16),
      "end": value.endDate[i].substring(11,16),
      "dow": [ value.day[i] ]
    };
    eventList.push(event);
  }

  console.log(JSON.stringify(eventList));

  $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    defaultView: 'month',
    events: eventList
  });
});

所以你在这里所做的一切主要是将数据结构从一种格式转换为另一种格式。注意它是多么清洁，更容易阅读（以及测试，维护和调试）。此外，你的if/else循环中的for似乎在任何一种情况下产生相同的对象，因此不清楚它的目的是什么。我在我的版本中删除了该测试。

defaultDate: moment()在你的fullCalendar声明中也是多余的 - fullCalendar默认情况下已经显示今天的日期（documentation）。