Populating api event data to a schedulecomponent

[Steven Oketch]

ive fetched data from my api and assigned them to state -  Events which is an array of objects. 

<ScheduleComponent

  height="550px"

  width="90%"

  currentView="Month"

  selectedDate={new Date()}

  rowAutoHeight={true}

  readonly={true}

  enablePersistence={true}

  eventSettings={{

    dataSource: events,

    fields: {

      id: "id",

      subject: "title",

      location: "location",

      description: "description",

      startTime: "start_time",

      endTime: "end_time",

      timeFormat: "h:mm a",

      isAllDay: "is_all_day",

      start: "start_date",

      end: "end_date"

    },

    allowAdding: false

  }}

  cellClick={args => (args.cancel = true)}

>

  <Inject services={[Day, Week, Month, Agenda]} />

</ScheduleComponent>

under fields the property on the right is the field names in my api, am stuck coz now the data aren't displayed in the calender. 

this is how my events single object looks like:

{ "title": "Test Event", "start_time": "06:26", "end_time": "07:28", "start_date": "2023-04-05", "end_date": "2023-04-05", "location": "Mombasa", "url": "https://acts-pathways-academy.org", "description": "Description Here", "reminders": "15", "time_zone": "Africa/Nairobi", "facilitators": "Facilitator here", "created_at": "2023-04-05T03:27:23.433000", "id": 1, "user_id": 13 }

Attachment: ACTS_Academy__20230405_18.52.07_879bc51d.rar

[Ravikumar Venkatesan]

Hi Steven,

Sample: https://stackblitz.com/edit/ej2-react-schedule-data-binding?file=index.js

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

In your shared code snippet, the field mapping is done wrong also the event start_time and end_time fields that mapped to the Schedule eventSettings fields only contain the time values, not the date details. To render the event, it’s mandatory to define the fields mapped with the startTime(event_start) and endTime(event_end) fields as date-time values in the events data source as shown below. So, we added additional fields called event_start and event_end at the events data source with date-time values and mapped them to the Schedule eventSettings fields property as shown in the below code snippet.

[index.js]

function LocalData() {

  let scheduleObj;

  const events = [{

    "title": "Test Event",

    "event_start": "2023-04-05 06:26",

    "event_end": "2023-04-05 07:28",

    "start_time": "06:26",

    "end_time": "07:28",

    "start_date": "2023-04-05",

    "end_date": "2023-04-05",

    "location": "Mombasa",

    "url": https://acts-pathways-academy.org,

    "description": "Description Here",

    "reminders": "15",

    "time_zone": "Africa/Nairobi",

    "facilitators": "Facilitator here",

    "created_at": "2023-04-05T03:27:23.433000",

    "id": 1,

    "user_id": 13

  }];

 

  return (

    <ScheduleComponent height="550px" width="90%" currentView="Month" selectedDate={new Date()} rowAutoHeight={true}

      readonly={true} enablePersistence={true} eventSettings={{

        dataSource: events,

        fields: {

          id: "id",

          subject: { name: "title" },

          location: { name: "location" },

          description: { name: "description" },

          startTime: { name: "event_start" },

          endTime: { name: "event_end" },

          isAllDay: { name: "is_all_day" }

        },

        allowAdding: false

      }}

      cellClick={args => (args.cancel = true)}

    >

      <Inject services={[Day, Week, Month, Agenda]} />

    </ScheduleComponent>

  );

}

export default LocalData;

Regards,

Ravikumar Venkatesan