We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Populating api event data to a schedulecomponent

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





  selectedDate={new Date()}





    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]} />


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

1 Reply

RV Ravikumar Venkatesan Syncfusion Team April 6, 2023 06:14 PM UTC

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.


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={[DayWeekMonthAgenda]} />




export default LocalData;


Ravikumar Venkatesan

Live Chat Icon For mobile
Up arrow icon