如何在 js-full-year 日历中选择范围和添加事件答案

【问题标题】：How to select range and add event in js-full-year calendar如何在 js-full-year 日历中选择范围和添加事件
【发布时间】：2019-11-06 10:17:20
【问题描述】：

我想知道如何选择范围并在 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);
});

【问题讨论】：

标签： javascript jquery javascript-objects jquery-events

【解决方案1】：

类似this?

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

【讨论】：