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

Posted 2023-05-07

【中文标题】日历控制如何传递日期、开始日期和结束日期

【英文标题】：Calendar control how to pass date, Start Date and End Date

【发布时间】：2020-01-23 09:54:34

【问题描述】：

我正在寻找一个活动日历，并遇到了一个示例 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 人，谁能告诉我如何将日期传递给这个日历

【参考方案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

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

【讨论】：

我如何将每个事件映射到它的日期，因为我正在寻找类似 eventName: 'Lunch Meeting w/ Mark', calendar: 'Work', color: 'orange', sDate:'01/01/2019', eDate:'15/01/2019' , .................. .,..........等等..

您可以将sDate 和eDate 作为属性添加到event 数组并更新renderEvents 函数以显示它。 sDate 和 eDate 是否还有其他功能？

不，我正在查看基本功能，以便事件按日期显示，事件应按 sDate 和 eDate 显示..

好的。然后你应该在renderEvents方法中循环events数组并推送所有在点击日期内的事件。

【参考方案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));

【讨论】：

我如何将每个事件映射到它的日期，因为我正在寻找类似 eventName: 'Lunch Meeting w/ Mark', calendar: 'Work', color: 'orange', sDate :'01/01/2019', eDate:'15/01/2019' , ........., ..........,....... ..等等..

但是我是单日做的……真的需要开始和结束日期吗？