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

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

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

在这里使用 Codepen - https://codepen.io/aditya-bhave/pen/eYObqYq

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