React Scheduler自定义约会表单

Question

我正在使用React Scheduler，我正在尝试自定义AppointmentForm。我想在表单创建中为title字段设置一个默认值，并禁用一些字段。这个问题解释了如何删除表单的所有字段，但我不明白如何选择我想要保留为默认值，哪些要更改以及如何更改。如果你能给我一个这样的例子，我将非常感激。

我目前的代码有所有默认的道具和一个自定义的，我希望能够改变默认的道具:

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 = () => {
...
const TextEditor = (props) => {
// eslint-disable-next-line react/destructuring-assignment
if (props.type === 'multilineTextEditor') {
return null;
} return <AppointmentForm.TextEditor {...props} />;
};
const BasicLayout = ({ onFieldChange, appointmentData, ...restProps }) => {
return (
<AppointmentForm.BasicLayout
appointmentData={appointmentData}
onFieldChange={onFieldChange}
{...restProps}   
>
<AppointmentForm.TextEditor
value = {userFullName}
type="title"
/>
</AppointmentForm.BasicLayout>
);
};
return (
<ThemeProvider theme={theme}>
<Container component="main" maxWidth="lg">
<CssBaseline />
<Box
sx= ...
>
<Scheduler
data={shifts}
height= "auto"
>
<ViewState
defaultCurrentDate={defaultCurrentDate}
defaultCurrentViewName="Week"
/>
<EditingState
onCommitChanges={commitChanges}
/>
<WeekView
cellDuration={60}
startDayHour={9}
endDayHour={22}
/>
<EditRecurrenceMenu />
<Toolbar />
<DateNavigator />
<Appointments />
<AppointmentTooltip
showOpenButton
showDeleteButton
/>
<AppointmentForm
basicLayoutComponent={BasicLayout}
textEditorComponent={TextEditor}
/>
</Scheduler>
</Box>
</Container>
</ThemeProvider>
);
}
export default DataSheet

Answer 1

取决于你想编辑/删除什么，下面是我的例子:

const BoolEditor = (props) => {
return null;
};
const LabelComponent = (props) => {
if (props.text === 'Details') {
return <AppointmentForm.Label
{ ...props} 
text="Precio Modulo"
/>  
} else if (props.text === 'More Information') {
return null
} else if (props.text === '-') {
return <AppointmentForm.Label
{ ...props}
/>  
}
};
const InputComponent = (props) => {
if (props.type === 'titleTextEditor') {
return <AppointmentForm.TextEditor
{ ...props}
type='numberEditor'
placeholder='Precio'
/>
}
};
// cambio el layout
const BasicLayout = ({ onFieldChange, appointmentData, ...restProps }) => {
return (
<AppointmentForm.BasicLayout
appointmentData={appointmentData}
onFieldChange={onFieldChange}
{...restProps}   
>
</AppointmentForm.BasicLayout>
);
};
// retorno el calendario 
return (
<>
<h1 style={{ 'textAlign': 'center' }}>Horario del Profesor:</h1>
<Paper>
<Scheduler
data={schedulerData}
>
<ViewState
defaultCurrentDate={currentDate}
defaultCurrentViewName="Week"
/>
<EditingState
onCommitChanges={commitChanges}
/>
<IntegratedEditing />
<DayView
startDayHour={7}
endDayHour={23}
/>
<WeekView startDayHour={7} endDayHour={23} />
<Toolbar />
<DateNavigator />
<TodayButton />
<ViewSwitcher />
<ConfirmationDialog />
<Appointments />
<AppointmentTooltip
showCloseButton
showOpenButton
/>
<AppointmentForm
readOnly={isNormalUser}
basicLayoutComponent={BasicLayout}
booleanEditorComponent={BoolEditor}
labelComponent={LabelComponent}
textEditorComponent={InputComponent}
/>
</Scheduler>
</Paper>
<br />
<br />
</>
)