求react-big-calendar自定义工具栏示例：移除右侧视图切换按钮

react-big-calendar 允许通过自定义 components 属性重写默认工具栏，无需隐藏整个工具栏。核心思路是复制默认工具栏的核心结构，仅移除右侧的视图切换按钮组。

实现步骤 #

1. 导入默认的 Calendar 组件
2. 自定义工具栏组件，保留左侧的日期导航按钮和当前日期显示，移除视图切换部分
3. 在 Calendar 组件中替换默认工具栏

完整代码示例 #

import { Calendar } from 'react-big-calendar';
import 'react-big-calendar/lib/css/react-big-calendar.css';

// 自定义工具栏组件
const CustomToolbar = (props) => {
  return (
    <div className="rbc-toolbar">
      {/* 保留左侧日期导航按钮组 */}
      <span className="rbc-btn-group">
        <button onClick={props.onNavigate('PREV')} className="rbc-btn">
          上一页
        </button>
        <button onClick={props.onNavigate('TODAY')} className="rbc-btn">
          今天
        </button>
        <button onClick={props.onNavigate('NEXT')} className="rbc-btn">
          下一页
        </button>
      </span>
      {/* 保留当前日期标签 */}
      <span className="rbc-toolbar-label">{props.label}</span>
      {/* 移除默认的视图切换按钮组 */}
    </div>
  );
};

// 使用自定义工具栏的日历组件
const MyCalendar = () => {
  // 替换为你的实际事件数据
  const events = [
    {
      title: '测试事件',
      start: new Date(),
      end: new Date(new Date().setHours(new Date().getHours() + 1))
    }
  ];

  return (
    <Calendar
      events={events}
      startAccessor="start"
      endAccessor="end"
      // 替换默认工具栏为自定义组件
      components={{ Toolbar: CustomToolbar }}
      // 设置默认视图（比如月视图）
      defaultView="month"
      style={{ height: 500 }}
    />
  );
};

export default MyCalendar;

补充说明 #

• 自定义工具栏继承了默认的 rbc-toolbar 类，布局样式会和原工具栏保持一致
• 若需要保留部分视图切换按钮，可在自定义组件中手动添加，通过 props.onViewChange('month') 这类方法触发视图切换
• 可根据需求调整按钮文案、样式，或添加其他自定义功能

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