React-Big-Calendar：能否将自定义Toolbar置于日历组件外部或外部访问？

当然可以，有两种常用方案实现这个需求：

方案一：受控模式打造完全自定义的外部工具栏 #

通过把日历的核心状态（当前日期、视图类型）提升到父组件，配合日历的受控属性，就能完全自主控制外部按钮的逻辑和位置，彻底摆脱内置工具栏的布局限制。

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

export default function ExternalToolbarCalendar() {
  // 管控日历的核心状态
  const [currentDate, setCurrentDate] = useState(new Date());
  const [currentView, setCurrentView] = useState(views.MONTH);

  // 上一页逻辑，根据当前视图调整日期
  const handlePrev = () => {
    setCurrentDate(prev => {
      const newDate = new Date(prev);
      if (currentView === views.MONTH) newDate.setMonth(newDate.getMonth() - 1);
      if (currentView === views.WEEK) newDate.setDate(newDate.getDate() - 7);
      if (currentView === views.DAY) newDate.setDate(newDate.getDate() - 1);
      return newDate;
    });
  };

  // 下一页逻辑
  const handleNext = () => {
    setCurrentDate(prev => {
      const newDate = new Date(prev);
      if (currentView === views.MONTH) newDate.setMonth(newDate.getMonth() + 1);
      if (currentView === views.WEEK) newDate.setDate(newDate.getDate() + 7);
      if (currentView === views.DAY) newDate.setDate(newDate.getDate() + 1);
      return newDate;
    });
  };

  // 回到今天
  const handleToday = () => setCurrentDate(new Date());

  // 切换视图
  const handleViewChange = (view) => setCurrentView(view);

  return (
    <div>
      {/* 自定义外部工具栏，可放在页面任意位置 */}
      <div className="custom-external-toolbar">
        <button onClick={handlePrev}>上一页</button>
        <button onClick={handleToday}>今天</button>
        <button onClick={handleNext}>下一页</button>
        <button onClick={() => handleViewChange(views.MONTH)}>月视图</button>
        <button onClick={() => handleViewChange(views.WEEK)}>周视图</button>
        <button onClick={() => handleViewChange(views.DAY)}>日视图</button>
      </div>

      {/* 日历组件：关闭内置工具栏，绑定受控状态 */}
      <Calendar
        date={currentDate}
        view={currentView}
        onNavigate={setCurrentDate}
        onView={setCurrentView}
        events={[]} // 替换为你的实际事件数据
        startAccessor="start"
        endAccessor="end"
        toolbar={false} // 关闭内置工具栏，避免重复
      />
    </div>
  );
}

方案二：通过Ref直接调用日历内置方法 #

如果不想自己处理日期计算，可以通过ref获取日历组件实例，直接调用它内置的导航和视图切换方法，代码更简洁。

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

export default function ExternalControlCalendar() {
  const calendarRef = useRef(null);

  // 调用内置的导航方法
  const handlePrev = () => calendarRef.current?.navigate('PREV');
  const handleNext = () => calendarRef.current?.navigate('NEXT');
  const handleToday = () => calendarRef.current?.navigate('TODAY');

  // 调用内置的视图切换方法
  const handleViewChange = (view) => calendarRef.current?.changeView(view);

  return (
    <div>
      {/* 外部控制按钮组，位置完全自定义 */}
      <div className="external-controls">
        <button onClick={handlePrev}>上一页</button>
        <button onClick={handleToday}>今天</button>
        <button onClick={handleNext}>下一页</button>
        <button onClick={() => handleViewChange(views.MONTH)}>月视图</button>
        <button onClick={() => handleViewChange(views.WEEK)}>周视图</button>
        <button onClick={() => handleViewChange(views.DAY)}>日视图</button>
      </div>

      {/* 绑定ref，可选关闭内置工具栏 */}
      <Calendar
        ref={calendarRef}
        events={[]} // 替换为你的实际事件数据
        startAccessor="start"
        endAccessor="end"
        toolbar={false} // 若需要保留内置工具栏，可删除此行
      />
    </div>
  );
}

额外说明 #

• 如果需要同时保留内置工具栏和外部控制按钮，只需移除toolbar={false}配置即可。
• 自定义按钮的样式、布局完全由你控制，可以放在页面顶部、侧边栏等任意位置。
• 两种方案都能实现完全脱离日历组件布局的外部控制需求，可根据自己的代码习惯选择。

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