日历控制如何传递日期、开始日期和结束日期

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

稍加修改即可实现。

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

1. 修改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;
    }
    ..
    ..
}

1. 修改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;
    }
    ...
}

在这里工作 Codepen - https://codepen.io/aditya-bhave/pen/eYObqYq

注意 - 我没有添加样式以使超出最小值-最大值范围的日期变灰，但可以通过添加样式轻松完成。

Answer 2

这里的日期是随机设置的

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