Как передать переменную в полное событие календаря?

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>

Мне нужно передать переменную дат полному календарному событию. Пожалуйста, помогите

Answer 1

Ваш 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>

Answer 2

Вам необходимо передать данные события в виде массива. В данный момент вы передаете объект. Вместо того чтобы записывать свои даты в строку, просто запишите массив вручную в свойство events конструктора следующим образом:

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

Подробнее о добавлении событий вы можете прочитать в документах FullCalendar .

В качестве альтернативы, если у вас есть для использования JSON.parse(), просто заключите строку в квадратные скобки:

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