React-Calendar实现工作日边框动态变色及日期悬停文本切换

1. 工作日边框动态颜色实现 #

通过tileClassName属性判断日期是否为工作日，结合CSS自定义边框样式：

import { useState } from 'react';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';
import './CustomCalendar.css';

const CustomCalendar = () => {
  // 判断是否为工作日（周一至周五）
  const isWeekday = (date) => {
    const day = date.getDay();
    return day !== 0 && day !== 6;
  };

  return (
    <Calendar
      // 给工作日添加自定义类名
      tileClassName={({ date }) => isWeekday(date) ? 'weekday-tile' : ''}
    />
  );
};

在CustomCalendar.css中添加样式：

.weekday-tile {
  border: 2px solid #2196F3; /* 自定义工作日边框颜色 */
  border-radius: 4px;
}

如果需要动态切换颜色（比如根据状态变化），可以改用tileStyle属性直接返回动态样式对象：

const [borderColor, setBorderColor] = useState('#2196F3');

// ...

<Calendar
  tileStyle={({ date }) => isWeekday(date) ? { border: `2px solid ${borderColor}` } : {}}
/>

2. 鼠标悬停日期切换文本内容 #

结合tileContent和状态管理，实现悬停时切换文本：

const CustomCalendar = () => {
  const [hoveredDate, setHoveredDate] = useState(null);
  const [hoverText, setHoverText] = useState('');

  const handleMouseEnter = (date) => {
    setHoveredDate(date);
    setHoverText(`今天是${date.toLocaleDateString()}`); // 自定义悬停文本
  };

  const handleMouseLeave = () => {
    setHoveredDate(null);
    setHoverText('');
  };

  return (
    <Calendar
      tileContent={({ date }) => (
        <div 
          onMouseEnter={() => handleMouseEnter(date)}
          onMouseLeave={handleMouseLeave}
          className="tile-content"
        >
          {/* 显示默认文本或悬停文本 */}
          {hoveredDate && date.getTime() === hoveredDate.getTime() ? hoverText : ''}
        </div>
      )}
    />
  );
};

添加CSS调整文本样式：

.tile-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

注意事项 #

• 确保react-calendar版本支持tileClassName、tileStyle和tileContent的函数式用法
• 比较日期时要用getTime()，避免直接对象比较导致的判断错误
• 两个功能可以直接合并使用，只需把代码整合即可

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