如何将数组放入事件中：[..]

Question

I am trying to put my variable array in the events: [..] part. However, this does not work. In the var ar is the selfmade array with the date loop. The var needs to be set in the events: [..] option.

    <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

It's a bit unclear what is going on here. In the code you've shown, events: [... ] will do nothing. It is supposed to be an option you give to fullCalendar when you create the calendar. Where is your code to create the calendar?

And the line var str =... is some sort of horror show. It looks like a mangled attempt to create some JSON. But a) that's a terrible way to create JSON - JSON.stringify exists for a good reason. And b) fullCalendar doesn't want JSON anyway, it wants an actual array of JS objects, which you haven't created.

(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.)

What I think you're probably trying to do is something like this:

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();
});

This creates an empty array called eventsList and then within the dates.ForEach loop creates an object for each date, and adds it to the event list. That list is then assigned as the "events" property in the fullCalendar options.

Live demo: https://codepen.io/ADyson82/pen/vYYrLva

---

PS Having said all that, it looks like you are trying to create a sequence of identical events for a series of dates. It's perhaps worth pointing out that since version 4, fullCalendar now supports recurring events , which can make your looping redundant.

You could implement the same thing as your code above much more simply using recurring events as follows:

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();
});

Demo: https://codepen.io/ADyson82/pen/oNNyYaV