javascript - 如何在 js-full-year 日历中选择范围和添加事件
问题描述
我想知道如何选择范围并在 js-year-calendar 中添加一个事件。我的代码如下所示。
现在我可以选择日期并在控制台上显示,但我想注册这个选定的事件并想在日历中显示它。
如果您已经有一些方法,请告诉我。
此代码参考以下文档:
https://year-calendar.github.io/js-year-calendar/documentation
new Calendar('.calendar', {
style: 'background',
dataSource: [{
startDate: new Date(2019, 1, 4),
endDate: new Date(2019, 1, 15),
color: "yellow"
}, {
startDate: new Date(2019, 3, 5),
endDate: new Date(2019, 5, 15),
color: "yellow"
}],
enableRangeSelection: true
});
document.querySelector('.calendar').addEventListener('selectRange', function(e) {
console.log("Select the range: " + e.startDate + " - " + e.endDate);
});
解决方案
像这样的东西?
// Create a dataSource variable
let dataSource = [
{
startDate: new Date(2019, 1, 4),
endDate: new Date(2019, 1, 15),
color: "yellow"
}, {
startDate: new Date(2019, 3, 5),
endDate: new Date(2019, 5, 15),
color: "yellow"
}
]
// Create the calendar with the dataSource
let calendar = new Calendar('#calendar', {
style: 'background',
dataSource: dataSource,
enableRangeSelection: true
});
document.querySelector('#calendar').addEventListener('selectRange', function(e) {
// Append the new data to dataSource
dataSource.push({
startDate: e.startDate,
endDate: e.endDate,
color: "red"
})
// Set the updated dataSource as main source
calendar.setDataSource(dataSource)
});
推荐阅读
- php - laravel 一对多关系,不显示数据
- vue.js - bootstrap vue 网站使用什么来弹出搜索结果
- c# - 使用 db.find 后收到实体错误
- java - android studio中不存在主要活动
- r - 根据另一列将多列组织成一行
- typescript - 转换对象输入参数以赋予它们类型,以便 TypeScript 不会抱怨
- css - 如何将图标保留在右上角的 bootstrap 4 导航栏中以进行移动视图
- android - 如何将复选框添加到我的 recyclerviewer xml?
- python - 如何遍历包含图像的目录和子目录并将它们保存为 Python 中的 jpeg
- cobol - 返回 Main,但格式自由