如何为Tempus Dominus 6日期时间选择器标记特殊颜色日期？

我正在使用Tempus Dominus 6版本的日期时间选择器JS控件，基于Hotwired Stimulus的配置代码如下：

import { Controller } from "@hotwired/stimulus"

import { TempusDominus } from "@eonasdan/tempus-dominus"
tempusDominus.extend( window.tempusDominus.plugins.customDateFormat );

export default class extends Controller {
  connect() {
    new tempusDominus.TempusDominus( this.element, {
      localization: {
         format: 'yyyy-MM-dd HH:mm'
      },
      display: {
        inline: true,
        sideBySide: true,
        buttons: {
          clear: false,
          close: false
        },
        calendarWeeks: true,
        components: {
          clock: true,
          useTwentyfourHour: true
        },
      },    
      useCurrent: false
    });
  }
}

当前选择器显示效果：

需求：为特定日期标记不同颜色，例如2023-07-10、2023-07-20标记为橙色，2023-07-13标记为红色。

实现方案 #

要实现特定日期高亮，需要借助Tempus Dominus的**钩子（hooks）**功能，在日期渲染时添加自定义CSS类，再通过样式定义颜色。

1. 修改Stimulus控制器代码

在配置中添加hooks选项，利用dayRender钩子判断当前日期是否需要高亮，并添加对应类名：

import { Controller } from "@hotwired/stimulus"
import { TempusDominus } from "@eonasdan/tempus-dominus"

tempusDominus.extend(window.tempusDominus.plugins.customDateFormat);

export default class extends Controller {
  connect() {
    // 定义需要高亮的日期和对应类名
    const highlightedDates = {
      '2023-07-10': 'highlight-orange',
      '2023-07-20': 'highlight-orange',
      '2023-07-13': 'highlight-red'
    };

    new tempusDominus.TempusDominus(this.element, {
      localization: {
        format: 'yyyy-MM-dd HH:mm'
      },
      display: {
        inline: true,
        sideBySide: true,
        buttons: {
          clear: false,
          close: false
        },
        calendarWeeks: true,
        components: {
          clock: true,
          useTwentyfourHour: true
        },
      },    
      useCurrent: false,
      // 添加钩子配置
      hooks: {
        dayRender: (context) => {
          // 将当前日期格式化为 yyyy-MM-dd 字符串
          const dateStr = context.date.toISOString().split('T')[0];
          // 检查是否在高亮列表中
          if (highlightedDates[dateStr]) {
            // 给日期元素添加自定义类
            context.el.classList.add(highlightedDates[dateStr]);
          }
        }
      }
    });
  }
}

2. 添加自定义CSS样式

在项目的样式文件中添加对应类的样式，实现颜色高亮：

/* 橙色高亮样式 */
.highlight-orange {
  background-color: #ffcc80 !important;
  color: #000 !important;
  border-radius: 50%;
}

/* 红色高亮样式 */
.highlight-red {
  background-color: #ef9a9a !important;
  color: #fff !important;
  border-radius: 50%;
}

说明

• dayRender钩子会在每个日历日期渲染时触发，context参数包含当前日期（context.date）和对应的DOM元素（context.el）
• 通过toISOString().split('T')[0]将日期转为yyyy-MM-dd格式，和定义的高亮日期匹配
• 使用!important是为了覆盖Tempus Dominus默认的日期样式，确保自定义样式生效

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