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 - которая должна быть массивом, содержащим серию объектов событий ( документация ) или

b) URL-адрес, откуда он может загрузить строку JSON, которую он затем автоматически проанализирует в массив JavaScript, содержащий объекты событий ( документация ), или

c) функция, выполняющая тот же процесс, что и b), но использующий пользовательский источник данных ( документация ).

Ваш код пытается реализовать параметр а), но вместо создания массива 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 уже будет показывать сегодняшнюю дату по умолчанию ( документация ).