如何在月视图中隐藏上月/下月的日期？

单纯用CSS隐藏非当月日期格子的问题在于，跨月事件或非当月事件依然会渲染到日历上，飘在当月的格子里。要彻底实现需求，需要从自定义日期单元格渲染和事件过滤两方面入手：

1. 计算当前月份的日期范围 #

先写一个工具函数，获取选中月份的第一天和最后一天，用来判断日期和事件是否属于当月：

const getMonthBoundaries = (targetDate) => {
  const year = targetDate.getFullYear();
  const month = targetDate.getMonth();
  return {
    firstDay: new Date(year, month, 1),
    lastDay: new Date(year, month + 1, 0)
  };
};

2. 自定义月视图的日期单元格组件 #

通过react-big-calendar的components属性，自定义月视图的日期单元格，直接不渲染非当月的日期格子：

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

const CustomMonthDay = ({ date, currentDate, ...restProps }) => {
  const { firstDay, lastDay } = getMonthBoundaries(currentDate);
  // 跳过非当月日期的渲染
  if (date < firstDay || date > lastDay) {
    return null;
  }
  return <MonthDay date={date} currentDate={currentDate} {...restProps} />;
};

3. 过滤事件，仅保留当月相关事件 #

把传入日历的事件过滤一遍，只保留和当前月份有交集的事件（如果需要显示跨月事件的当月部分，就用这个逻辑；如果只显示完全在当月的事件，可调整判断条件）：

// 假设你的事件数组是events，每个事件有start和end字段
const { firstDay, lastDay } = getMonthBoundaries(yourCurrentMonthDate); // yourCurrentMonthDate是日历当前选中的月份日期
const filteredEvents = events.filter(event => {
  const eventStart = new Date(event.start);
  const eventEnd = new Date(event.end || event.start);
  // 判断事件是否和当月有重叠
  return !(eventEnd < firstDay || eventStart > lastDay);
});

4. 整合到日历组件中 #

把自定义组件和过滤后的事件传入Calendar：

<Calendar
  events={filteredEvents}
  startAccessor="start"
  endAccessor="end"
  views={['month']}
  components={{
    month: {
      day: CustomMonthDay
    }
  }}
  onNavigate={(newDate) => {
    // 这里可以更新yourCurrentMonthDate的状态，确保日期范围实时更新
    setYourCurrentMonthDate(newDate);
  }}
  // 其他必要属性，比如locale等
/>

5. 调整CSS优化布局 #

因为不渲染非当月格子，日历的第一行可能会出现格子数量不足7个的情况，添加以下CSS调整布局：

.rbc-month-view .rbc-row {
  justify-content: flex-start;
}
.rbc-day-bg {
  width: calc(100% / 7);
  min-height: 80px; /* 根据需求调整高度 */
}

这样就能实现月视图只显示当月日期，且不会出现非当月事件的问题。

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