如何修改datetimepicker并添加日期悬停显示提示框功能

实现步骤 #

• 首先提前整理你的谷歌事件映射数据，以对应format: 'L'格式的日期字符串作为key，事件内容作为value：

// 示例事件映射，可替换为你从谷歌事件接口拉取的真实数据
const googleEventMap = {
  "09/20/2024": "Google Search Central 线上研讨会",
  "10/05/2024": "Google Cloud Next 大会",
  "11/11/2024": "Chrome 130 版本正式推送"
};

• 修改你的datetimepicker初始化配置，添加渲染完成钩子，为有事件的日期单元格添加悬停提示：

$('#calendar').datetimepicker({
  format: 'L',
  inline: true,
  // 日历每次渲染完成后触发该钩子
  onGenerate: function () {
    // 遍历所有日期单元格
    $(this).find('.day').each(function () {
      // 取当前单元格对应日期，格式化后匹配事件映射
      const currentDate = moment($(this).data('date')).format('L');
      if (googleEventMap[currentDate]) {
        // 原生title实现基础悬停提示，也可替换为自定义Tooltip组件逻辑
        $(this).attr('title', googleEventMap[currentDate]);
        // 可选：给有事件的日期增加特殊样式标识
        $(this).addClass('event-exist');
      } else {
        $(this).removeAttr('title').removeClass('event-exist');
      }
    })
  }
})

• 可选：添加样式区分有事件的日期

.day.event-exist {
  background: #ea4335;
  color: #fff;
  border-radius: 4px;
}

适配说明 #

如果你使用的是Bootstrap版datetimepicker，日历渲染钩子名称可能为update，日期单元格类名可能为datepicker-day，可通过浏览器元素检查工具确认对应类名和日期属性后调整代码即可。
若需要更美观的自定义悬停样式，仅需要将设置title的逻辑替换为你使用的Tooltip组件初始化代码即可。

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