如何使用Moment.js日历点击指定日期获取事件名称？

看起来你已经搭好了日历的基础框架，还定义了允许选择的日期数组，接下来只需要给这些日期绑定对应的事件名称，再在选择日期时展示出来就可以了。我给你整理了完整的实现方案：

核心思路 #

1. 先创建一个日期-事件名称的映射对象，把每个允许选择的日期和对应的自定义事件关联起来，这样查询起来高效又直观；
2. 在日历的日期点击回调里，用Moment.js把选中的日期格式化为统一的YYYY-MM-DD格式，避免格式不匹配的问题；
3. 匹配映射对象里的事件名称，然后展示到页面的指定位置。

修改后的完整代码示例 #

// 你已定义的允许选择日期数组
var allowedDates = [ 
  '2018-04-01', 
  '2018-04-02', 
  '2018-04-03', 
  '2018-04-11', 
  '2018-04-12' 
];

// 新增：日期与自定义事件的映射表，按需修改事件名称即可
var dateEvents = {
  '2018-04-01': '愚人节趣味挑战赛',
  '2018-04-02': '前端组件化技术分享',
  '2018-04-03': 'Q1项目进度复盘会',
  '2018-04-11': '产品V2.0版本线上发布会',
  '2018-04-12': '核心客户线下见面会'
};

! function() { 
  var today = moment(); 

  function Calendar(selector, events) { 
    this.el = document.querySelector(selector); 
    this.events = events || [];
    this.init(); // 初始化日历
  }

  Calendar.prototype.init = function() {
    this.renderCalendar(); // 渲染日历结构
    this.bindDateClickHandler(); // 绑定日期点击事件
  };

  // 绑定日期点击的处理逻辑
  Calendar.prototype.bindDateClickHandler = function() {
    var self = this;
    // 假设你的日历日期格子都有.calendar-date类名
    this.el.querySelectorAll('.calendar-date').forEach(function(dateElement) {
      dateElement.addEventListener('click', function() {
        // 获取当前点击日期的标准格式（YYYY-MM-DD）
        var selectedDate = moment(this.dataset.date, 'YYYY-MM-DD').format('YYYY-MM-DD');
        
        // 检查是否是允许选择的日期
        if (allowedDates.includes(selectedDate)) {
          // 从映射表中取出对应事件，没有的话显示默认文本
          var targetEvent = dateEvents[selectedDate] || '暂无自定义事件';
          // 把事件名称展示到页面（需要提前在页面加个id为event-info的元素）
          document.getElementById('event-info').textContent = `当前选中日期的事件：${targetEvent}`;
        } else {
          document.getElementById('event-info').textContent = '该日期无可用事件';
        }
      });
    });
  };

  // 日历渲染方法（这里是简化示例，你可以替换成自己的渲染逻辑）
  Calendar.prototype.renderCalendar = function() {
    var calendarHtml = '<div class="calendar-container">';
    // 这里写你的日历渲染逻辑，比如生成月份标题、日期格子
    // 注意给每个日期格子添加data-date属性，值为YYYY-MM-DD格式的日期
    // 例如：<div class="calendar-date" data-date="2018-04-01">1</div>
    calendarHtml += '</div>';
    this.el.innerHTML = calendarHtml;
  };

  // 初始化日历实例，传入你的日历容器选择器
  new Calendar('#my-calendar');
}();

几个关键注意点 #

• 日期格式统一：一定要确保所有日期都用YYYY-MM-DD格式，Moment.js的format方法可以帮你标准化日期格式，避免因为格式不匹配找不到事件；
• 页面元素准备：需要在HTML里加一个用于展示事件的元素，比如 <div id="event-info"></div>；
• 扩展性：后续要加新的日期事件，直接在dateEvents对象里新增键值对就行，非常方便；
• 事件绑定时机：要确保在日历渲染完成后再绑定点击事件，不然会找不到日期元素。

内容的提问来源于stack exchange，提问作者K-Series