react-big-calendar 如何在无事件日期悬停时显示自定义tooltip？

核心实现逻辑 #

react-big-calendar 内置了dateCellWrapper自定义扩展点，可直接包裹所有日期单元格，通过组件自动传入的当前日期事件列表判断是否为空，无需自行监听全局鼠标事件、编写日期匹配逻辑。

实现步骤 #

• 编写自定义日期单元格包裹组件
  优先使用无额外依赖的原生title属性方案，快速实现基础tooltip效果：

  const CustomDateCellWrapper = ({ children, value, events }) => {
    // 判断当前单元格是否无关联事件
    const isDateEmpty = events.length === 0
    return (
      <div
        // 仅无事件时挂载title属性，触发原生悬停提示
        title={isDateEmpty ? "No booking this date" : undefined}
        style={{ width: "100%", height: "100%" }}
      >
        {children}
      </div>
    )
  }
  

• 绑定自定义组件到Calendar配置
  在你已有的Calendar配置中新增components属性，把上述组件绑定到dateCellWrapper字段即可：

  <Calendar
    startAccessor={(event) => new Date(event.start)}
    endAccessor={(event) => new Date(event.end)}
    selectable
    localizer={localizer}
    views={["month", "week", "day"]}
    loading={true}
    // 新增的自定义单元格配置
    components={{
      dateCellWrapper: CustomDateCellWrapper
    }}
  />
  

自定义样式Tooltip升级 #

如果需要替换浏览器原生的title默认样式，可以在包裹组件中通过状态控制自定义提示框的显隐：

import { useState } from 'react'
const CustomDateCellWrapper = ({ children, events }) => {
  const [isTipVisible, setIsTipVisible] = useState(false)
  const isDateEmpty = events.length === 0

  return (
    <div 
      className="relative w-full h-full"
      onMouseEnter={() => isDateEmpty && setIsTipVisible(true)}
      onMouseLeave={() => setIsTipVisible(false)}
    >
      {children}
      {isTipVisible && isDateEmpty && (
        <div className="absolute top-2 left-1/2 -translate-x-1/2 bg-gray-800 text-xs text-white px-2 py-1 rounded shadow z-10">
          No booking this date
        </div>
      )}
    </div>
  )
}

注意事项 #

• 自定义包裹组件自动接收的events参数，已经是当前日期下的所有关联事件，无需自行遍历全局事件数组做日期匹配
• 该配置对月、周、日三个视图的所有日期单元格全局生效，无需针对单视图单独配置
• 若单元格本身存在关联事件，不会触发任何提示，完全匹配“仅无事件日期显示提示”的需求

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