How we can Update events coming from api response

I recommend checking the data that comes from the API endpoint - there might be a problem with the format (most likely the "start" or "end" properties).

Both are same I have checked several times. Do you want to see that even if I will take the default data that will come from redux store that is also causing the same issu

Hey Dan,
Let me share the data from console so that we can figure out the issue

It looks like your data might be a JSON string instead of an array - you forgot to convert it using JSON.parse().

Hey Dan,

I have checked the events coming from api is formatted and than passed to calendar events. Please find the below screen shot of the same

If u want me to connect with you let me know
My details
WhatsApp:8494086151

Below error I m getting

PFA

I did a few tests and you can only see this error if you supply a string instead of an array. You should double check that (try logging typeof this.props.events, check all places where it is set, ...).

The next release will include some specific checks for this case and it will throw a descriptive exception (like the Pro version).

Can we connect is it possible your possible time

Typeof it is saying object as array is object that is fine I guess is there anything need to look at ?

Hey Dan,

Any update ?

Unfortunately, I don't have much to add:

• If it works with data defined locally but not with data from a remote endpoint, there is clearly a problem with the data format. So you should focus on that.
• I was able to reproduce this issue if the data object was a string instead of the expected array.
• The next release (available later this week) will include additional checks and it will print a more specific error message. You can wait for it to get a better hint.
• You should try to dig a bit deeper when debugging the problem. Checking the type using typeof doesn't have to be enough (the type of new String("text") is "object" but this object will produce the same error). Also, the events can be set multiple times - just some of these calls can be problematic.

Hey Dan,

Now my app is not breaking but events are not coming when loading from store. I logged the incoming events data is there but not coming in rendering in calendar but if i provide the data locally it is working and loading. I have done with function based approach do i need to do using Class based approach ?

I am going to attach my code please let me know the issue so that i can fix this

please consider this

import React, { useState, useEffect, useRef } from 'react';
import { useSelector } from 'react-redux';
import { DayPilotCalendar} from "@daypilot/daypilot-lite-react";

export const Rooms = () => {

  // ref
  const calendarRef = useRef(null);
  
  // state
   const [open, setModal] = useState(false);
    const [pivotState, setPivotState] = useState({
    viewType: "Resources",
    durationBarVisible: true,
    timeRangeSelectedHandling: "Enabled",
    events: roomEvents,
    columns: [
      { name: "Room 1", id: "Room 1" },
      { name: "Room 2", id: "Room 2" },
      { name: "Room 3", id: "Room 3" },
      { name: "Room 4", id: "Room 4" },
      { name: "Room 5", id: "Room 5" },
      { name: "Room 6", id: "Room 6" },
      { name: "Room 7", id: "Room 7" },
    ],
    startdate: roomsDate
  });
  
  // local state
 let events = [{
    end: "2022-11-23T11:30:00",
    id: 0,
    resource: "Room 1",
    start: "2022-11-23T10:30:00",
    text: "test",
  },
  {
    id: 1,
    text: "Event 1",
    start: "2022-11-23T10:30:00",
    end: "2022-11-23T13:00:00",
    resource: "Room 2"
  },
  ]
// data from store
const roomEvents = useSelector((store) => store?.app?.events);

// this if for timeRange Selected opening modal and creating event for that time slot

const onTimeRangeSelected = () => async args => {
    const dp = obj.calendar;
    const form = [
      { name: "Text", id: "text" },
      { name: "Start", id: "start", type: "datetime" },
      { name: "End", id: "end", type: "datetime" },
    ];

    console.log(args.resource);
    setModal(true);
   
  }


// updating calendar on getting data from api call
useEffect(() => {

 

    const columns = [
      { name: "Room 1", id: "Room 1" },
      { name: "Room 2", id: "Room 2" },
      { name: "Room 3", id: "Room 3" },
      { name: "Room 4", id: "Room 4" },
      { name: "Room 5", id: "Room 5" },
      { name: "Room 6", id: "Room 6" },
      { name: "Room 7", id: "Room 7" },
    ];
    const startDate = "2023-03-07";

    console.log('roomEvents', roomEvents);
    console.log('calendat', calendarRef);
    // setPivotState({ ...pivotState, events: events });
    obj.calendar.update({ startDate, columns, roomEvents});

  }, [roomEvents]);
  
  // calendar Ref
   const obj = {
    get calendar() {
      return calendarRef.current.control;
    }
  }


retrun(

 <div style={styles.main} id="dp">
            <DayPilotCalendar
              {...pivotState}
              ref={calendarRef}
              onTimeRangeSelected={onTimeRangeSelected()}

            />
          </div>

)

}

You need to change this line:

obj.calendar.update({ startDate, columns, roomEvents});

to this:

obj.calendar.update({ startDate, columns, events: roomEvents});

(For new issues, please create a new question in the future so others can find them - thanks.)

@Dan data i have tried with your above suggestion still events are not getting updated when i am receiving data from api. Is is possible to connect with me over anywhere where we can spend 5-10 mins and close this please. After we get the resolution i will create separate ticket and mark it with solution.

Your time and help will be highly appreciated.