React Calendar仅高亮周六：移除周日高亮的实现方案问询

核心思路 #

利用react-calendar提供的tileClassName自定义属性，手动判断日期并为周六添加专属高亮类，同时通过CSS覆盖默认周末样式，取消周日的高亮效果。

实现步骤 #

1. 组件配置与自定义类名逻辑

在React组件中，通过tileClassName函数对每个日期单元格的类名进行控制：

import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';
import './CustomCalendar.css'; // 引入自定义样式

const CustomCalendar = () => {
  // 自定义每个日期单元格的类名
  const getTileClassName = ({ date }) => {
    const dayOfWeek = date.getDay(); // 0=周日，6=周六
    // 仅为周六添加高亮类
    if (dayOfWeek === 6) {
      return 'custom-saturday-weekend';
    }
    // 周日返回空字符串，覆盖默认的周末类
    return dayOfWeek === 0 ? '' : undefined;
  };

  return (
    <Calendar
      startWeekDay={0} // 设置周日为一周起始日
      tileClassName={getTileClassName}
    />
  );
};

export default CustomCalendar;

2. 自定义CSS样式

在CustomCalendar.css中，先取消默认周末类对周日的高亮，再为周六设置专属样式：

/* 取消默认周末类对周日、周六的全局高亮 */
.react-calendar__month-view__days__day--weekend {
  color: inherit;
  background-color: inherit;
}

/* 为周六设置专属高亮样式 */
.react-calendar__month-view__days__day.custom-saturday-weekend {
  color: #dc2626; /* 红色文字示例 */
  background-color: #fef2f2; /* 浅红背景示例 */
}

关键说明 #

• tileClassName函数会为每个日期单元格计算类名，返回空字符串可以覆盖react-calendar自动添加的react-calendar__month-view__days__day--weekend类，从而取消周日的默认高亮。
• 通过自定义类名custom-saturday-weekend，可以精准控制周六的样式，避免和周日的样式冲突。
• 如果默认样式优先级过高，可以给自定义样式添加!important，或者使用更具体的CSS选择器（如上述示例中的组合选择器）提升优先级。

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