React FullCalendar如何禁用上月及下月日期单元格的点击功能？

方法一：在select回调中过滤无效日期 #

你当前开启了selectable={true}，点击日期会触发select事件（即你的handleDateClick）。要禁用非当前视图月份的日期点击，直接在这个回调里判断选中日期是否属于当前显示的月份，不属于则终止后续逻辑：

第一步：修正日期判断逻辑（匹配当前视图月份，而非今日） #

原来的判断是和当天日期对比，这不符合“禁用视图中上月/下月单元格”的需求，应该改为和当前视图的月份对比：

dayCellContent={(arg) => {
  // 获取当前日历视图的起始日期，以此确定当前显示的月份
  const viewDate = arg.view.currentStart;
  const viewMonth = viewDate.getMonth();
  const viewYear = viewDate.getFullYear();
  const cellMonth = arg.date.getMonth();
  const cellYear = arg.date.getFullYear();
  
  const isNonCurrentMonth = cellMonth !== viewMonth || cellYear !== viewYear;
  
  if (isNonCurrentMonth) {
    return <div className="disabled">{arg.dayNumberText}</div>;
  }
  return arg.dayNumberText;
}}

第二步：在点击回调中过滤无效日期 #

修改你的handleDateClick函数，判断选中日期是否属于当前视图月份，不是则直接返回：

const handleDateClick = (selectInfo) => {
  const viewDate = selectInfo.view.currentStart;
  const viewMonth = viewDate.getMonth();
  const viewYear = viewDate.getFullYear();
  const selectedMonth = selectInfo.date.getMonth();
  const selectedYear = selectInfo.date.getFullYear();
  
  // 非当前视图月份的日期，直接终止处理
  if (selectedMonth !== viewMonth || selectedYear !== viewYear) {
    return;
  }
  
  // 这里编写你原本的日期点击处理逻辑
  console.log('选中当前月日期：', selectInfo.date);
};

方法二：结合CSS强化禁用效果（可选） #

给非当前月的单元格添加CSS，既强化视觉提示，也能直接阻止鼠标事件：

.disabled {
  color: #ccc; /* 灰色显示，区分无效日期 */
  pointer-events: none; /* 直接禁用所有鼠标事件 */
}

如果需要保留hover等交互效果，可以只保留颜色样式，依赖方法一的逻辑过滤点击即可。

额外优化：用dayCellClassNames统一管理单元格类 #

比起在dayCellContent里判断，用dayCellClassNames更适合专门处理单元格样式类，代码更清晰：

// 替换原本的dayCellContent中的类判断逻辑
dayCellClassNames={(arg) => {
  const viewDate = arg.view.currentStart;
  const viewMonth = viewDate.getMonth();
  const viewYear = viewDate.getFullYear();
  const cellMonth = arg.date.getMonth();
  const cellYear = arg.date.getFullYear();
  
  return (cellMonth !== viewMonth || cellYear !== viewYear) ? 'disabled' : '';
}}

// 简化dayCellContent
dayCellContent={(arg) => arg.dayNumberText}

以上组合方式，既实现了视觉上的禁用提示，又从逻辑层面阻止了无效日期的点击操作。

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