如何在JS全年日历中选择范围并添加事件

Question

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

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