Календарь управления, как передать дату, дату начала и дату окончания

Question

Я ищу календарь событий и наткнулся на пример. https://codepen.io/peanav/pen/ulkof выглядит хорошо, но когда я просматривал javascript, я не могу найти, где пройдены даты, даты начала и окончания, я могу видеть некоторые данные в видемассив, который имеет только Title, Type и colour, но я не вижу даты в массиве

!function() {
  var data = [
    { eventName: 'Lunch Meeting w/ Mark', calendar: 'Work', color: 'orange' },
    { eventName: 'Interview - Jr. Web Developer', calendar: 'Work', color: 'orange' },
    { eventName: 'Demo New App to the Board', calendar: 'Work', color: 'orange' },
    { eventName: 'Dinner w/ Marketing', calendar: 'Work', color: 'orange' },

    { eventName: 'Game vs Portalnd', calendar: 'Sports', color: 'blue' },
    { eventName: 'Game vs Houston', calendar: 'Sports', color: 'blue' },
    { eventName: 'Game vs Denver', calendar: 'Sports', color: 'blue' },
    { eventName: 'Game vs San Degio', calendar: 'Sports', color: 'blue' },

    { eventName: 'School Play', calendar: 'Kids', color: 'yellow' },
    { eventName: 'Parent/Teacher Conference', calendar: 'Kids', color: 'yellow' },
    { eventName: 'Pick up from Soccer Practice', calendar: 'Kids', color: 'yellow' },
    { eventName: 'Ice Cream Night', calendar: 'Kids', color: 'yellow' },

    { eventName: 'Free Tamale Night', calendar: 'Other', color: 'green' },
    { eventName: 'Bowling Team', calendar: 'Other', color: 'green' },
    { eventName: 'Teach Kids to Code', calendar: 'Other', color: 'green' },
    { eventName: 'Startup Weekend', calendar: 'Other', color: 'green' }
  ];

Я не JS, кто-то может указать мне, как я могу передавать даты в этот календарь

Answer 1

Здесь дата устанавливается случайным образом

Calendar.prototype.drawMonth = function() {  //line no 54
    var self = this;

    this.events.forEach(function(ev) {
      ev.date = self.current.clone().date(Math.random() * (29 - 1) + 1);
    });
    ....

Вы можете установить дату как ниже

ev.date = moment(new Date("10/5/2019"));

вы можете добавить новое свойство (дату) к объекту данных, например

var data = [
    { 
       eventName: 'Lunch Meeting w/ Mark', 
       calendar: 'Work', 
       color: 'orange',
       date: '10/5/2019'
 },

Редактировать:

заменить эту строку

ev.date = self.current.clone().date(Math.random() * (29 - 1) + 1); //line No. 58

на

ev.date = moment(new Date(ev.date));

Answer 2

Это может быть реализовано с небольшими изменениями.

1. Примите minDate и maxDate как часть конструктора и создайте свойства

var calendar = new Calendar('#calendar', data, '1/10/2019', '12/31/2019');

Constructor
function Calendar(selector, events, minDate, maxDate) {
  ..
  ..
  this.minDate = moment(minDate);
  this.maxDate = moment(maxDate);
  ..
  ..
}

Изменить метод openDay для проверки minDate и maxDate

Calendar.prototype.openDay = function(el) {
    var details, arrow;
    var dayNumber = +el.querySelectorAll('.day-number')[0].innerText || +el.querySelectorAll('.day-number')[0].textContent;
    var day = this.current.clone().date(dayNumber);

    if (day.isBefore(this.minDate) || day.isAfter(this.maxDate)) {
      return;
    }
    ..
    ..
}

Измените nextMonth и prevMonth методы для проверки maxDate и minDate

Calendar.prototype.nextMonth = function() {
    if (this.current.isAfter(this.maxDate)) {
      return;
    }
    ...
}

Calendar.prototype.prevMonth = function() {
    if (this.current.isBefore(this.minDate)) {
      return;
    }
    ...
}

Рабочий кодовый код здесь - https://codepen.io/aditya-bhave/pen/eYObqYq

Примечание - Iне добавлены стили к датам, выделенным серым цветом вне диапазона минимальных и максимальных значений, но это легко сделать, добавив стили.