How can i use '@devexpress/dx-react-scheduler' in ts? It cause Typescript error

user_19797367 0
Viewed 83

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..?

typeerror typescript devexpress types
1 Answers

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>
      );
    }

user_200690010
Related