TypeScript with Syncfusion and Scheduling Dates

Question

I'm using a Syncfusion component which works perfectly fine in ReactJS but has some errors in TypeScript, I tried all day to type it but it seems I'm not getting nowhere so I came to stackoverflow, English is my third language so please bare with me.

const Scheduler: React.FC = () => {
  const [scheduleObj, setScheduleObj] = useState();

  const change = (args: { value: any; }) => {
    scheduleObj.selectedDate = args.value;
    scheduleObj.dataBind();
  };

  return (
    <div className="m-2 md:m-10 mt-24 p-2 md:p-10 bg-white rounded-3xl">
      <Header category="App" title="Calendar" />
      <ScheduleComponent
        height="650px"
        ref={(schedule) => setScheduleObj(schedule)}
        selectedDate={new Date(2021, 0, 10)}
        eventSettings={{ dataSource: scheduleData }}
        dragStart={onDragStart}
      >
        <ViewsDirective>
          { ['Day', 'Week', 'WorkWeek', 'Month', 'Agenda'].map((item) => <ViewDirective key={item} option={item} />)}
        </ViewsDirective>
        <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]} />
      </ScheduleComponent>
    </div>
  );
};

These are the Errors

ERROR in src/pages/Calendar.tsx:16:5
TS2532: Object is possibly 'undefined'.
    14 |
    15 |   const change = (args: { value: any; }) => {
  > 16 |     scheduleObj.selectedDate = args.value;
       |     ^^^^^^^^^^^
    17 |     scheduleObj.dataBind();
    18 |   };
    19 |

ERROR in src/pages/Calendar.tsx:17:5
TS2532: Object is possibly 'undefined'.
    15 |   const change = (args: { value: any; }) => {
    16 |     scheduleObj.selectedDate = args.value;
  > 17 |     scheduleObj.dataBind();
       |     ^^^^^^^^^^^
    18 |   };
    19 |
    20 |

ERROR in src/pages/Calendar.tsx:31:43
TS2345: Argument of type 'ScheduleComponent | null' is not assignable to parameter of type 'SetStateAction<undefined>'.
  Type 'null' is not assignable to type 'SetStateAction<undefined>'.
    29 |       <ScheduleComponent
    30 |         height="650px"
  > 31 |         ref={(schedule) => setScheduleObj(schedule)}
       |                                           ^^^^^^^^
    32 |         selectedDate={new Date(2021, 0, 10)}
    33 |         eventSettings={{ dataSource: scheduleData }}
    34 |         dragStart={onDragStart}

ERROR in src/pages/Calendar.tsx:37:100
(property) option?: View | undefined
It accepts the schedule view name, based on which we can define with its related properties in a single object. The applicable view names are,

Day
Week
WorkWeek
Month
Year
Agenda
MonthAgenda
TimelineDay
TimelineWeek
TimelineWorkWeek
TimelineMonth
TimelineYear
@default

null

TS2769: No overload matches this call.
  Overload 1 of 2, '(props: ViewsModel | ViewsDirTypecast | Readonly<ViewsModel | ViewsDirTypecast>): ViewDirective', gave the following error.
    Type 'string' is not assignable to type 'View | undefined'.
  Overload 2 of 2, '(props: ViewsModel | ViewsDirTypecast, context: any): ViewDirective', gave the following error.
    Type 'string' is not assignable to type 'View | undefined'.
    35 |       >
    36 |         <ViewsDirective>
  > 37 |           { ['Day', 'Week', 'WorkWeek', 'Month', 'Agenda'].map((item) => <ViewDirective key={item} option={item} />)}
       |                                                                                                    ^^^^^^
    38 |         </ViewsDirective>
    39 |         <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]} />
    40 |       </ScheduleComponent>

To fix the first two errors I gave the useState hook a type

type TScheduler = {
  [x: string]: any;
}

const Scheduler: React.FC = () => {
  const [scheduleObj, setScheduleObj] = useState(null as unknown as TScheduler);

  const change = (args: { value: any; }) => {
    scheduleObj.selectedDate = args.value;
    scheduleObj.dataBind();
  };

....
}

but this couldnt fix the third error, to fix the third error I gave the useState hook this type because

const [scheduleObj, setScheduleObj] = useState<ScheduleComponent | null>(null);

ref= (schedule: ScheduleComponent | null) => void

which fixed it but brought the first two errors back

and for the fourth error, if you change the option prop to a string it works, but the calendar only display "DAY DAY DAY DAY DAY"

<ViewsDirective>
          { ['Day', 'Week', 'WorkWeek', 'Month', 'Agenda'].map((item) => <ViewDirective key={item} option={item} />)}
        </ViewsDirective>

Answer 1

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/reactTs-schedule652196982

Object is possibly 'undefined'

Use scheduleObj instance type like let scheduleObj: ScheduleComponent | null instead of const[scheduleObj, setScheduleObj] = useState()

Argumentoftype 'ScheduleComponent | null'is not assignable to parameter of type 'SetStateAction'. Type'null'is not assignable to type 'SetStateAction'

Use ref in ScheduleComponent like ref={schedule => scheduleObj = schedule} instead of ref={(schedule) => setScheduleObj(schedule)}

No overload matches this call.

import View type from the ej2-react-schedule package and use the View type option in ViewsDirective like option={item as View}

[App.tsx]

import React from 'react';
import { Agenda, Day, DragAndDrop, Inject, Month, Resize, ScheduleComponent, ViewDirective, ViewsDirective,
  View, Week, DragEventArgs, WorkWeek } from '@syncfusion/ej2-react-schedule';

const Scheduler: React.FC = () => {
  let scheduleObj: ScheduleComponent | null;
  const data: object[] = [
    {
      Id: 1,
      Subject: 'Meeting - 1',
      StartTime: new Date(2022, 1, 15, 10, 0),
      EndTime: new Date(2022, 1, 16, 12, 30),
      IsAllDay: false
    },
  ];
  const change = (args: { value: any; }) => {
    if (scheduleObj) {
      scheduleObj.selectedDate = args.value;
      scheduleObj.dataBind();
    }
  };
  const onDragStart = (args: DragEventArgs) => {
    if (args && args.navigation) {
      args.navigation.enable = true;
    }
  }
  return (
    <div className="m-2 md:m-10 mt-24 p-2 md:p-10 bg-white rounded-3xl">
      <ScheduleComponent height="650px" ref={schedule => scheduleObj = schedule} selectedDate={new Date(2022, 0, 10)}
        eventSettings={{ dataSource: data }} dragStart={onDragStart}>
        <ViewsDirective>
          {['Day', 'Week', 'WorkWeek', 'Month', 'Agenda'].map((item) => <ViewDirective key={item} option={item as View} />)}
        </ViewsDirective>
        <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]} />
      </ScheduleComponent>
    </div>
  );
};
export default Scheduler;