Как поместить массив в события: [..] - PullRequest
Новая
       14

Как поместить массив в события: [..]

0 голосов
/ 08 ноября 2019

Я пытаюсь поместить свой массив переменных в события: [..] часть. Однако это не работает. В var ar это самодельный массив с циклом дат. Переменная должна быть установлена ​​в параметре events: [..]. 

    <script>
    "use strict";

    /*let date = new Date();
    let day = date.getDay();
    let month = date.getMonth() + 1;
    let year = date.getFullYear();*/

    document.addEventListener('DOMContentLoaded', function () {

        var getDates = function (startDate, endDate) {
            var dates = [],
                currentDate = startDate,
                addDays = function (days) {
                    var date = new Date(this.valueOf());
                    date.setDate(date.getDate() + days);
                    return date;
                };
            while (currentDate <= endDate) {
                dates.push(currentDate);
                currentDate = addDays.call(currentDate, 1);
            }
            return dates;
        };

        var dates = getDates(new Date('2019-11-01'), new Date('2019-11-02'));

        dates.forEach(function (date) {
            var day = ("0" + date.getDate()).slice(-2);
            var month = date.getMonth() + 1;
            var year = date.getFullYear();

            var str = "title: \'Max\'| start: \'" + year + "-" + month + "-" + day + "\'| color: \'#ff7d7d\'";
            let ar = str.split('|');
        });
            events: [
                {title: 'Frans', start: '2019-11-08', color: '#ff7d7d'},
            ]
</script>

1 Ответ

1 голос
/ 08 ноября 2019

Немного неясно, что здесь происходит. В показанном вами коде events: [ ... ] ничего не сделает. Предполагается, что это опция, которую вы даете fullCalendar при создании календаря. Где твой код для создания календаря?

А строка var str =... - это своего рода шоу ужасов. Это похоже на искаженную попытку создать JSON. Но а) это ужасный способ создания JSON - JSON.stringify существует по уважительной причине. И б) fullCalendar в любом случае не нужен JSON, ему нужен фактический массив объектов JS, который вы не создали.

(NB. Вы можете подключить его к API, который возвращает строку JSON, и fullCalendar загрузит JSON , а затем проанализирует его в массив , но если вы передаете данные черезкод, тогда вы должны предоставить массив напрямую.)

То, что я думаю вы, вероятно, пытаетесь сделать, что-то вроде этого: 

document.addEventListener("DOMContentLoaded", function() {
  var getDates = function(startDate, endDate) {
    var dates = [],
      currentDate = startDate,
      addDays = function(days) {
        var date = new Date(this.valueOf());
        date.setDate(date.getDate() + days);
        return date;
      };
    while (currentDate <= endDate) {
      dates.push(currentDate);
      currentDate = addDays.call(currentDate, 1);
    }
    return dates;
  };

  var dates = getDates(new Date("2019-11-01"), new Date("2019-11-02"));
  var eventList = [];

  dates.forEach(function(date) {
    eventList.push({
      title: "Max",
      start: date,
      color: "#ff7d7d"
    });
  });

  var calendarEl = document.getElementById("calendar");
  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: ["interaction", "dayGrid", "timeGrid"],
    header: {
      left: "prev,next today",
      center: "title",
      right: "dayGridMonth,timeGridWeek,timeGridDay"
    },
    events: eventList
  });

  calendar.render();
});

Это создаетпустой массив с именем eventsList, а затем в цикле dates.ForEach создает объект для каждой даты и добавляет его в список событий. Этот список затем присваивается как свойство «events» в параметрах fullCalendar.

Демонстрация в реальном времени: https://codepen.io/ADyson82/pen/vYYrLva

PS Сказав все это, похоже, что вы пытаетесьсоздать последовательность идентичных событий для ряда дат. Возможно, стоит отметить, что начиная с версии 4, fullCalendar теперь поддерживает повторяющиеся события , что может сделать ваш цикл избыточным.

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

document.addEventListener("DOMContentLoaded", function() {
  var calendarEl = document.getElementById("calendar");
  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: ["interaction", "dayGrid", "timeGrid"],
    header: {
      left: "prev,next today",
      center: "title",
      right: "dayGridMonth,timeGridWeek,timeGridDay"
    },
    events: [{
      title: "Max",
      color: "#ff7d7d",
      startRecur: new Date("2019-11-01"),
      endRecur: new Date("2019-11-03") //03 because recurrence end dates are exclusive, as per docs
    }]
  });

  calendar.render();
});

Демонстрация: https://codepen.io/ADyson82/pen/oNNyYaV

...