Как выбрать диапазон и добавить событие в календарь JS-полный год - PullRequest
0 голосов
/ 06 ноября 2019

Я хотел бы знать, как выбрать диапазон и добавить событие в js-year-calendar. мой код показан ниже.

Теперь я могу выбирать дни и отображать их на консоли, но я хотел бы зарегистрировать это выбранное событие и хотел бы отобразить его в календаре.

Если вы ужеесть метод, пожалуйста, дайте мне знать.

Этот код ссылается на документацию ниже:

https://year -calendar.github.io / js-year-календарь / документация

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

enter image description here

1 Ответ

1 голос
/ 06 ноября 2019

Что-то вроде это ?

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