如何在 ts 中使用“@devexpress/dx-react-scheduler”？ 它会导致 Typescript 错误

Question

I want to use '@devexpress/dx-react-scheduler' library.

But it cause Typescript error like under.

Type '{ children: Element[]; data: AppointmentModel[]; }' is not assignable to type 'IntrinsicAttributes & SchedulerProps'. Property 'children' does not exist on type 'IntrinsicAttributes & SchedulerProps'.

I made it the same as in the official documentation ( https://devexpress.github.io/devextreme-reactive/react/scheduler/docs/guides/typescript/ ), but the following error also occurs in the official documentation.

The difference is, the official documentation only shows a warning ( https://codesandbox.io/s/fcj6pm ),

import * as React from 'react';
import Paper from '@mui/material/Paper';
import { AppointmentModel, ViewState, SchedulerDateTime } from '@devexpress/dx-react-scheduler';
import {
  Scheduler, DayView, Appointments, Resources,
} from '@devexpress/dx-react-scheduler-material-ui';


const Demo = () => {
  const [currentDate, setCurrentDate] = React.useState<SchedulerDateTime>('2018-10-31');

  return (
    <Paper>
      <Scheduler
        data={appointments}
      >
        <ViewState
          currentDate={currentDate}
          onCurrentDateChange={setCurrentDate}
        />
        <DayView
          startDayHour={7}
          endDayHour={12}
        />

        <Appointments />
        <Resources
          data={resources}
        />
      </Scheduler>
    </Paper>
  );
};

export default Demo;

but I get an error(not just a warning) and the screen doesn't appear.

What should I do..?

Answer 1

Sorry for my late answer. It seems you have to use the component from "@devexpress/dx-react-scheduler". And then set the requiered props.

like this: (sudo code). rootComponent returns the from "@devexpress/dx-react-scheduler-material-ui"

 import { Scheduler as MuiSchedular, DayView, Appointments, Resources, } from "@devexpress/dx-react-scheduler-material-ui"; import { AppointmentModel, Scheduler, ViewState, } from "@devexpress/dx-react-scheduler"; export const Calendar = () => { const rootComponent = (props: Scheduler.RootProps) => { return <MuiSchedular.Root {...props} /> }; return ( <Paper> <Scheduler height={"auto"} firstDayOfWeek={1} rootComponent={rootComponent} data={appointments?? []} locale={"da-DK"} > <ViewState currentDate={currentDate} onCurrentDateChange={setCurrentDate} /> <DayView startDayHour={7} endDayHour={12} /> <Appointments /> <Resources data={resources} /> </Scheduler> </Paper> ); }