如何在react-calendar中为日期项自定义圆形边框

步骤1：编写日期匹配辅助函数 #

先实现一个函数，用来判断日历中的每个日期是否落在数据源的日期范围内，并返回对应的边框颜色。注意统一日期比较维度（仅保留年月日，忽略时分秒），避免时间精度干扰判断：

const getDateBorderColor = (date: Date): string | null => {
  // 标准化当前日期为「年月日」格式
  const targetDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());

  for (const item of dataSources) {
    // 标准化数据源的起止日期
    const startDate = new Date(item.startDate.getFullYear(), item.startDate.getMonth(), item.startDate.getDate());
    const endDate = new Date(item.endDate.getFullYear(), item.endDate.getMonth(), item.endDate.getDate());

    // 判断日期是否在范围内（包含起止日）
    if (targetDate >= startDate && targetDate <= endDate) {
      return item.color;
    }
  }
  return null;
};

步骤2：配置React-Calendar组件 #

提供两种实现方式，按需选择即可：

方式一：内联样式直接设置

通过tileProps属性动态给匹配的日期项添加圆形边框样式：

import Calendar from 'react-calendar'
...
const [selectedDate, setSelectedDate] = React.useState(new Date())
...
<Calendar
  view='month'
  onChange={setSelectedDate}
  value={selectedDate}
  tileProps={({ date }) => {
    const color = getDateBorderColor(date);
    return color ? {
      style: {
        border: `2px solid ${color}`,
        borderRadius: '50%',
        padding: '4px', // 避免内容贴边框，可按需调整
      }
    } : {};
  }}
/>

方式二：CSS类名控制（更易维护）

先定义CSS类：

/* 自定义日历日期项边框样式 */
.calendar-tile-red {
  border: 2px solid red !important;
  border-radius: 50%;
  padding: 4px;
}

.calendar-tile-blue {
  border: 2px solid blue !important;
  border-radius: 50%;
  padding: 4px;
}

然后通过tileClassName动态绑定类名：

<Calendar
  view='month'
  onChange={setSelectedDate}
  value={selectedDate}
  tileClassName={({ date }) => {
    const color = getDateBorderColor(date);
    return color ? `calendar-tile-${color}` : '';
  }}
/>

注意事项 #

• 如果同一日期匹配多个数据源项，当前逻辑会返回第一个匹配的颜色；若需支持多边框，可修改逻辑返回颜色数组，通过box-shadow实现多层边框效果。
• 若React-Calendar默认样式覆盖自定义样式，可通过提高CSS优先级（如添加父类前缀、使用!important）解决。
• 可根据需求调整边框粗细、样式（如dashed虚线）或内边距数值。

内容的提问来源于stack exchange，提问作者talent-jsdev