在DevExtreme React Scheduler工具栏实现自定义Add Appointment按钮

结合你使用的@devexpress/dx-react-scheduler v4.0.3版本，可通过以下步骤实现自定义添加预约按钮：

• 导入依赖组件与Hooks
  先引入所需的自定义工具栏项组件、Scheduler上下文Hook，以及Material-UI的按钮组件：

  import { useSchedulerContext } from '@devexpress/dx-react-scheduler';
  import { CustomToolbarItem } from '@devexpress/dx-react-scheduler-material-ui';
  import Button from '@mui/material/Button';
  

• 编写自定义按钮组件
  通过useSchedulerContext获取Scheduler的dispatch方法，触发预约弹窗的显示逻辑，还可以预设预约的默认时间（比如当前时间往后1小时）：

  function CustomAddAppointmentButton() {
    const { dispatch } = useSchedulerContext();
  
    const handleAdd = () => {
      const now = new Date();
      const endDate = new Date(now.getTime() + 60 * 60 * 1000);
  
      dispatch({
        type: 'showAppointmentPopup',
        payload: {
          appointmentData: {
            startDate: now,
            endDate: endDate,
            title: ''
          },
          isNew: true
        }
      });
    };
  
    return (
      <CustomToolbarItem>
        <Button variant="contained" color="primary" onClick={handleAdd}>
          添加预约
        </Button>
      </CustomToolbarItem>
    );
  }
  

• 集成到Scheduler组件中
  在Scheduler的Toolbar插件下添加自定义按钮，同时确保已配置AppointmentForm插件（用于显示预约编辑弹窗）：

  <Scheduler data={yourAppointmentList}>
    {/* 配置所需的视图插件，比如日视图、周视图 */}
    <DayView />
    <WeekView />
    
    <Toolbar>
      <CustomAddAppointmentButton />
      {/* 保留默认工具栏项，比如视图切换器 */}
      <ViewSwitcher />
    </Toolbar>
  
    {/* 必须配置此插件才能显示预约弹窗 */}
    <AppointmentForm />
  </Scheduler>
  

如果不需要预设时间，可简化dispatch的参数，仅传递isNew: true，弹窗会自动使用当前视图的合理默认时间。

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