如何將數組放入事件中：[..]

Question

我正在嘗試將我的變量數組放入 events: [..] 部分。 但是，這不起作用。 在 var ar 中是帶有日期循環的自制數組。 var 需要在 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>

Answer 1

有點不清楚這里發生了什么。 在您顯示的代碼中， events: [... ]不會做任何事情。 它應該是您在創建日歷時提供給 fullCalendar 的選項。 創建日歷的代碼在哪里？

var str =...這一行是某種恐怖表演。 它看起來像是創建一些 JSON 的失敗嘗試。 但是 a) 這是創建 JSON 的糟糕方法 - JSON.stringify的存在是有充分理由的。 b) fullCalendar 無論如何都不想要 JSON ，它想要一個實際的 JS 對象數組，而您還沒有創建它。

(NB You can connect it to an API which returns a JSON string, and fullCalendar will download the JSON and then parse it into an array , but if you're supplying the data through code, then you should supply an array directly.)

我認為您可能正在嘗試做的是這樣的事情：

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循環中為每個日期創建一個 object，並將其添加到事件列表中。 然后將該列表分配為 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