如何在React Big Calendar的周视图中移除日期数字？

方法一：自定义日期格式化函数 #

React Big Calendar支持通过dayFormat属性自定义周视图头部的日期显示格式，只需让该函数返回星期几的缩写即可：

使用moment作为本地化工具 #

import { Calendar, momentLocalizer } from 'react-big-calendar';
import moment from 'moment';

const localizer = momentLocalizer(moment);

const CustomCalendar = () => {
  // 自定义格式化逻辑，只返回星期缩写
  const formatDayHeader = (date) => {
    return moment(date).format('ddd'); // 输出：Sun、Mon、Tue...
  };

  return (
    <Calendar
      localizer={localizer}
      views={['week']}
      dayFormat={formatDayHeader}
      // 补充你的其他日历配置属性
    />
  );
};

使用date-fns作为本地化工具 #

如果用date-fns替代moment，写法类似：

import { Calendar, dateFnsLocalizer } from 'react-big-calendar';
import { format } from 'date-fns';

const localizer = dateFnsLocalizer({
  format,
  // 其他date-fns本地化配置
});

const formatDayHeader = (date) => {
  return format(date, 'EEE'); // 输出：Sun、Mon、Tue...
};

// 日历组件使用同上

方法二：CSS隐藏日期数字 #

如果不想修改JS逻辑，可通过CSS定位日期数字元素并隐藏（需根据你使用的React Big Calendar版本调整选择器）：

/* 隐藏周视图头部的日期数字部分 */
.rbc-header span:first-child {
  display: none;
}

/* 若DOM结构嵌套更深，可使用更精准的选择器 */
.rbc-week-header .rbc-header > div > span:first-of-type {
  display: none;
}

可以通过浏览器开发者工具查看实际DOM结构，调整CSS选择器以匹配你的项目。

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