如何将数组放入事件中:[..]
How to put array in events: [..]
我正在尝试将我的变量数组放在事件中:[..] 部分。但是,这不起作用。
在 var ar 中是带有日期循环的自制数组。
var 需要在事件中设置:[..] 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>
有点不清楚这里发生了什么。在您显示的代码中,events: [ ... ]
将不执行任何操作。它应该是您在创建日历时提供给 fullCalendar 的选项。您创建日历的代码在哪里?
var str =...
行是某种恐怖表演。看起来像是创建一些 JSON 的失败尝试。但是 a) 这是创建 JSON 的糟糕方式 - JSON.stringify
的存在是有充分理由的。 b) fullCalendar 不想要 JSON 无论如何,它想要一个实际的 JS 对象数组,你还没有创建它。
(N.B。您可以将它连接到 API 其中 returns 一个 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
循环中为每个日期创建一个对象,并将其添加到事件列表中。然后将该列表指定为 fullCalendar 选项中的 "events" 属性。
现场演示:https://codepen.io/ADyson82/pen/vYYrLva
P.S。说了这么多,看起来您正在尝试为一系列日期创建一系列相同的事件。也许值得指出的是,从版本 4 开始,fullCalendar 现在支持 recurring events,这可以使您的循环变得多余。
您可以更简单地使用重复事件来实现与上述代码相同的功能,如下所示:
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();
});
我正在尝试将我的变量数组放在事件中:[..] 部分。但是,这不起作用。 在 var ar 中是带有日期循环的自制数组。 var 需要在事件中设置:[..] 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>
有点不清楚这里发生了什么。在您显示的代码中,events: [ ... ]
将不执行任何操作。它应该是您在创建日历时提供给 fullCalendar 的选项。您创建日历的代码在哪里?
var str =...
行是某种恐怖表演。看起来像是创建一些 JSON 的失败尝试。但是 a) 这是创建 JSON 的糟糕方式 - JSON.stringify
的存在是有充分理由的。 b) fullCalendar 不想要 JSON 无论如何,它想要一个实际的 JS 对象数组,你还没有创建它。
(N.B。您可以将它连接到 API 其中 returns 一个 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
循环中为每个日期创建一个对象,并将其添加到事件列表中。然后将该列表指定为 fullCalendar 选项中的 "events" 属性。
现场演示:https://codepen.io/ADyson82/pen/vYYrLva
P.S。说了这么多,看起来您正在尝试为一系列日期创建一系列相同的事件。也许值得指出的是,从版本 4 开始,fullCalendar 现在支持 recurring events,这可以使您的循环变得多余。
您可以更简单地使用重复事件来实现与上述代码相同的功能,如下所示:
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();
});