MaterializeCSS的events选项是否用于高亮日期？如何正确实现？

你的问题核心在于：Materialize 1.0.0版本的events选项不会自动给标记的日期添加高亮样式——官方文档提到该选项用于记录事件日期，但默认没有绑定渲染高亮的逻辑，需要通过自定义回调手动实现。

正确实现步骤： #

1. 改用可靠的日期存储格式：把events数组改为存储日期时间戳（或Date对象），避免字符串格式匹配可能出现的差异问题。
2. 利用renderDay回调自定义渲染：这个回调会在每个日期单元格渲染时触发，可判断当前日期是否属于事件日期，并返回自定义样式类。
3. 添加高亮CSS样式：给自定义类设置背景色、文字色等高亮效果。

完整代码示例： #

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<style>
  /* 自定义事件日期高亮样式 */
  .datepicker-event-day {
    background-color: #26a69a !important;
    color: white !important;
    border-radius: 50%;
  }
</style>

test date:
<br>
<input type="text" class="datepicker">

<script>
document.addEventListener('DOMContentLoaded', function() {
  // 存储事件日期的时间戳，用于匹配
  const eventDates = [
    new Date('2023-01-02').getTime(),
    new Date('2023-01-05').getTime()
  ];

  M.Datepicker.init(document.querySelectorAll('.datepicker'), {
    showClearBtn: true,
    // 自定义日期渲染逻辑
    renderDay: function(date) {
      const currentTimestamp = date.getTime();
      // 判断当前日期是否为事件日期
      if (eventDates.includes(currentTimestamp)) {
        return 'datepicker-event-day';
      }
      return '';
    }
  });
});
</script>

补充说明： #

• 如果坚持使用toDateString()格式，也可以在renderDay中将当前日期转为相同字符串格式进行匹配，但时间戳匹配更可靠，可规避时区或字符串格式差异问题。
• 若使用Materialize 1.1.0及以上版本，部分版本对events选项的默认支持更完善，但1.0.0版本必须通过上述自定义方式实现高亮。

内容的提问来源于stack exchange，提问作者IMB