How to load data for ScheduleComponent and handle update/delete in a custom way?

[Justin Schnurer]

Ideally, I'd like to have an array of calendar events client-side which I can simply pass into the Schedule Component. Then, if a user changes one, I would like to handle the "updateCalendarItem" event manually so that I can send it to my own CRUD web API.

Something kind of like this would be ideal:

const [myItems, setMyItems] = useState<IMyCalendarItem[]>([ . . . ]);

<ScheduleComponent
  items={myItems}
  onItemUpdate={(item) => myOwnCustomHandler(item)}
/>

1. This something like this possible? From looking at the docs and API reference, I think handling the scheduler in this way is not supported.

Therefore, I have been trying to figure out how to create a custom Data Manager to handle the queries to the API so I can send them to the different endpoints that my API provides. This is what I have so far attemp

This is the DataManager for the component.

new DataManager({

        url: config.endpoints.baseUrl + "/AuditPlanCalendarItems/GetCalendarItems",

        crudUrl: config.endpoints.baseUrl + "/AuditPlanCalendarItems/UpdateCalendarItems",

        adaptor: new UrlAdaptor,

        headers: [{ "Authorization": `Bearer ${token}`, }],

      })

This is the component I am using:

<ScheduleComponent

  selectedDate={new Date()}

  eventSettings={{

    dataSource: dataManager,

  }}

  group={{ resources: ["Basins", "GeoUnits", "SubGeoUnits", "Facilities"] }}

  rowAutoHeight={true}

  width="100%"

  height="100%"

>

  <ViewsDirective>

    <ViewDirective

      option="TimelineWeek"

      timeScale={{ enable: false }}

    />

    <ViewDirective

      option="TimelineMonth"

      timeScale={{ enable: false }}

    />

  </ViewsDirective>

  <ResourcesDirective>

    <ResourceDirective

      name='Basins'

      field='basinId'

      title='Basin'

      dataSource={state.basins}

      textField='name'

      idField='id'

    />

    <ResourceDirective

      name='GeoUnits'

      field='geoUnitId'

      title='GeoUnit'

      dataSource={state.geoUnits}

      textField='name'

      idField='id'

      groupIDField="basinId"

    />

    <ResourceDirective

      name='SubGeoUnits'

      field='subGeoUnitId'

      title='SubGeoUnit'

      dataSource={state.subGeoUnits}

      textField='name'

      idField='id'

      groupIDField="geoUnitId"

    />

    <ResourceDirective

      name="Facilities"

      field="facilityId"

      title="Facility"

      textField="name"

      idField="id"

      groupIDField="subGeoUnitId"

      dataSource={state.facilities}

    />

  </ResourcesDirective>

  <Inject

    services={[TimelineMonth, TimelineViews, DragAndDrop, Resize]}

  />

</ScheduleComponent>

I am padding a list of items in for each of the ResourceDirective components which are stored in a state.

The component renders and I can see the rows for each of my Resources properly. However, none of my calendar events from my API appear.

The ScheduleComponent makes an HTTP POST to my API endpoint (/AuditPlanCalendarItems/GetCalendarItems) and the API returns an array of objects. This is the response from the API:

[{"id":1,"type":"Plan","startTime":"2022-08-02T00:00:00","endTime":"2022-08-06T00:00:00","subject":"Plan Without Audit 1","businessId":null,"facilityId":872,"subGeoUnitId":260,"geoUnitId":164,"basinId":94},{"id":2,"type":"Plan","startTime":"2022-08-01T00:00:00","endTime":"2022-08-11T00:00:00","subject":"Plan Without Audit 2","businessId":null,"facilityId":872,"subGeoUnitId":260,"geoUnitId":164,"basinId":94},{"id":3,"type":"Audit","startTime":"2022-08-06T00:00:00","endTime":"2022-08-08T00:00:00","subject":"Audit 3","businessId":null,"facilityId":123,"subGeoUnitId":283,"geoUnitId":168,"basinId":94},{"id":4,"type":"Audit","startTime":"2022-08-06T00:00:00","endTime":"2022-08-08T00:00:00","subject":"Audit 4","businessId":null,"facilityId":872,"subGeoUnitId":260,"geoUnitId":164,"basinId":94},{"id":5,"type":"Plan","startTime":"2022-08-01T00:00:00","endTime":"2022-08-08T00:00:00","subject":"Plan 5","businessId":null,"facilityId":60,"subGeoUnitId":341,"geoUnitId":180,"basinId":96}]

However, the calendar items do not appear anywhere within the body of the schedule component.​

This is the final rendered output of the Schedule Component:

2. Why are my items not appearing in the schedule component?

I have tried setting a dataBound​ event and parsing my objects in various different ways but it had no effect. I have tried creating a custom Adaptor by extending UrlAdaptor and overriding the processResponse​ method and parsing my items in various ways as well. However, nothing I do results in the items appearing in the scheduler.

Please help.

[Ruksar Moosa Sait]

Hi Justin,

Greetings from Syncfusion support.

We have checked on your shared codes and let you know that the build-in Schedule fields are following the PasCal case. In your shared code you have used camel case for all of the Schedule fields. If you have used custom field names(startTime instead of StartTime) with the Schedule it’s mandatory to map the custom name of the field to the Schedule eventSettings field property. You can find the details below UG. So, we suggest you map the custom field names to the Schedule eventSettings fields property to render appointments with the Schedule.

https://ej2.syncfusion.com/react/documentation/schedule/appointments/#binding-different-field-names

Kindly let us know if you need any further assistance on this.

Regards,

Ruksar Moosa Sait

If this post is helpful, kindly consider accepting it as the solution so that other members can locate it more quickly.