如何自定义DevExtreme React Scheduler的AppointmentForm设置默认值与禁用字段

实现要点 #

• 新建预约的title默认值直接通过EditingState的defaultAppointment配置即可，仅对新建场景生效，不会修改已有预约的内容
• 字段保留、禁用、隐藏可以直接通过自定义textEditorComponent实现，不需要删除全部默认字段，按需对指定字段做处理即可
• 仅当需要调整字段顺序、新增自定义字段时，才需要自定义BasicLayout组件

修改后可运行代码 #

import React, { useState, useEffect } from 'react';
import Box from '@mui/material/Box';
import { ViewState, EditingState } from '@devexpress/dx-react-scheduler';
import {
  Scheduler, Appointments, AppointmentForm, AppointmentTooltip, WeekView, Toolbar,
  DateNavigator, EditRecurrenceMenu, ConfirmationDialog
} from '@devexpress/dx-react-scheduler-material-ui';
import { Alert } from '@mui/material';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import Container from '@mui/material/Container';
import CssBaseline from '@mui/material/CssBaseline';

const theme = createTheme();
  
const DataSheet = () => {
  // 假设userFullName是你要设置的默认title值
  const [userFullName, setUserFullName] = useState('默认预约人');
  const [shifts, setShifts] = useState([]);
  const defaultCurrentDate = new Date();

  const commitChanges = ({ added, changed, deleted }) => {
    // 你的原有提交逻辑
  };

  // 自定义文本编辑器：控制字段的隐藏、禁用
  const TextEditor = (props) => {
    // 隐藏多行文本（描述）字段
    if (props.type === 'multilineTextEditor') {
      return null;
    }
    // 禁用title字段，不可修改
    if (props.type === 'title') {
      return <AppointmentForm.TextEditor {...props} disabled />;
    }
    // 其他字段保留默认配置
    return <AppointmentForm.TextEditor {...props} />;
  };

  // 如果你不需要调整字段顺序/新增字段，下面的BasicLayout可以完全删掉，不用传这个prop
  const BasicLayout = ({ onFieldChange, appointmentData, ...restProps }) => {
    return (
      <AppointmentForm.BasicLayout
        appointmentData={appointmentData}
        onFieldChange={onFieldChange}
        {...restProps}   
      />
    );
  };

  return (
    <ThemeProvider theme={theme}>
      <Container component="main" maxWidth="lg">
        <CssBaseline />
        <Box sx={{ my: 4 }}>
          <Scheduler
            data={shifts}
            height="auto"
          >
            <ViewState
              defaultCurrentDate={defaultCurrentDate}
              defaultCurrentViewName="Week"
            />
            {/* 新增defaultAppointment配置，设置新建预约的默认值 */}
            <EditingState
              onCommitChanges={commitChanges}
              defaultAppointment={{
                title: userFullName,
                // 还可以在这里加其他字段的默认值，比如startDate、endDate等
              }}
            />
            <WeekView
              cellDuration={60}
              startDayHour={9}
              endDayHour={22}
            />
            <EditRecurrenceMenu />
            <Toolbar />
            <DateNavigator />
            <Appointments />
            <AppointmentTooltip
              showOpenButton
              showDeleteButton
            />
            <AppointmentForm
              textEditorComponent={TextEditor}
              // 如果不需要改布局，下面的basicLayoutComponent可以删掉
              basicLayoutComponent={BasicLayout}
            />
          </Scheduler>
        </Box>
      </Container>
    </ThemeProvider>
  );
}

export default DataSheet

拓展说明 #

如果需要修改其他非文本类型的字段（比如时间选择器、下拉框），可以对应自定义dateEditorComponent、selectEditorComponent等属性，实现逻辑和textEditorComponent一致，按需判断字段类型做处理即可。

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