如何在react-big-calendar的月视图中隐藏上月日期

有两种常用方法可以实现这个需求，具体如下：

方法1：通过CSS快速隐藏 #

react-big-calendar会给非当前月的日期元素添加rbc-off-range-bg（背景容器）和rbc-off-range（日期数字）类，直接通过CSS控制隐藏即可：

/* 完全隐藏非当前月的日期（包括背景和数字） */
.rbc-off-range-bg {
  display: none;
}

/* 仅隐藏非当前月的日期数字，保留背景区域 */
.rbc-off-range {
  visibility: hidden;
}

方法2：自定义日期单元格组件（灵活定制） #

如果需要更精细的控制（比如自定义非当前月单元格的显示内容），可以自定义月视图的日期单元格组件：

步骤1：创建自定义单元格组件 #

import { useState } from 'react';
import { Calendar } from 'react-big-calendar';

// 自定义月视图日期单元格
const CustomMonthDateCell = ({ date, value, ...props }) => {
  // 获取当前视图的月份（需配合Calendar的currentDate和onNavigate跟踪）
  const [currentViewMonth, setCurrentViewMonth] = useState(new Date().getMonth());

  // 判断当前日期是否属于视图月份
  if (date.getMonth() !== currentViewMonth) {
    // 非当前月，返回空内容
    return <div {...props}></div>;
  }

  // 当前月，渲染默认日期内容
  return (
    <div {...props}>
      <span>{value}</span>
    </div>
  );
};

步骤2：在Calendar中配置自定义组件 #

const YourCalendarComponent = () => {
  const [currentViewDate, setCurrentViewDate] = useState(new Date());

  return (
    <Calendar
      localizer={localizer}
      events={eventLists} {/* 注意：你的原代码里用了myEventsList，实际定义的是eventLists，需保持一致 */}
      startAccessor="start"
      endAccessor="end"
      style={{ height: 800 }}
      eventPropGetter={eventStyleGetter}
      view="month"
      currentDate={currentViewDate}
      onNavigate={(newDate) => setCurrentViewDate(newDate)}
      components={{
        month: {
          dateCell: CustomMonthDateCell
        }
      }}
    />
  );
};

注意事项 #

• 确保事件数组变量名一致：你的代码中Calendar的events属性用了myEventsList，但定义的事件数组是eventLists，需要统一变量名，否则事件无法正常显示。
• 自定义组件中通过onNavigate和currentDate跟踪当前视图的月份，确保切换月份时能正确隐藏非目标月份的日期。

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