如何禁用react-calendar点击上下页按钮时的视图切换功能？

方案1：通过受控activeStartDate属性拦截跳转 #

这是最贴合官方设计逻辑的实现方式，通过控制视图的起始日期完全掌握跳转权限：

• 把activeStartDate绑定到本地state，转为受控属性
• 在onActiveDateChange回调中对比新老日期判断触发来源，符合拦截条件时直接终止状态更新即可
  示例代码如下：

import { useState } from 'react';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';
// 替换为你项目中实际的Toast组件引入
import { Toast } from 'antd-mobile' /* 示例为antd移动端，可替换为任意Toast组件 */;

function CustomCalendar() {
  // 受控管理日历当前视图的起始日期
  const [activeStartDate, setActiveStartDate] = useState(new Date());
  const [selectedDate, setSelectedDate] = useState(new Date());

  const handleActiveDateChange = (newDate) => {
    // 新日期早于当前视图起始日期，判定为点击Prev按钮
    if (newDate < activeStartDate) {
      Toast.show('无法查看更早的日期');
      // 不更新状态，即可阻止视图跳转
      return;
    }
    // 点击Next按钮等其他场景正常更新视图
    setActiveStartDate(newDate);
  };

  return (
    <Calendar
      value={selectedDate}
      onChange={setSelectedDate}
      activeStartDate={activeStartDate}
      onActiveDateChange={handleActiveDateChange}
    />
  );
}

方案2：自定义Prev按钮完全接管点击逻辑 #

如果需要更灵活的控制，可以直接替换组件内置的Prev按钮，自己实现点击逻辑：

• 用prevLabel属性传入自定义的按钮组件
• 自定义按钮的点击事件中阻止事件冒泡即可完全覆盖默认行为
  示例代码如下：

import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';
import { Toast } from 'antd-mobile';

function CustomCalendar() {
  const handlePrevClick = (e) => {
    e.stopPropagation();
    e.preventDefault();
    Toast.show('无法查看更早的日期');
  };

  return (
    <Calendar
      prevLabel={
        <button 
          onClick={handlePrevClick}
          // 可添加原有按钮的className保持样式一致
          className="react-calendar__navigation__prev-button"
        >
          &lt;
        </button>
      }
    />
  );
}

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