search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

How we can Update events coming from api response

Related article: React Calendar with Date Picker (Open-Source)
Asked by Akshay Gandotra
17 days ago.

when i am trying to add events coming from api response i am getting p.getTime is not a function error. but if i try to use events defined in file it works well. Could you please help me with issue

class Calendar extends Component {

    constructor(props) {
        super(props);

        this.calendarRef = React.createRef();

        this.state = {
            viewType: "Week",
            timeRangeSelectedHandling: "Enabled",
            onEventClick: async args => {
                const modal = await DayPilot.Modal.prompt("Update event text:", args.e.text());
                if (!modal.result) { return; }
                const e = args.e;
                e.data.text = modal.result;
                this.calendar.events.update(e);
            },
        };
    }

    calendar() {
        return this.calendarRef.current.control;
    }

    componentDidMount() {

        // load event data
        this.setState({
            startDate: "2022-11-11",
            events: this.props.events

            // [
            //     {
            //         id: 1,
            //         text: "Event 1",
            //         start: "2022-09-07T10:30:00",
            //         end: "2022-09-07T13:00:00"
            //     },
            //     {
            //         id: 2,
            //         text: "Event 2",
            //         start: "2022-09-08T09:30:00",
            //         end: "2022-09-08T11:30:00",
            //         barColor: "#6aa84f"
            //     },
            // ]
        });

    }

    render() {
        return (
            <DayPilotCalendar
                {...this.state}
                ref={this.calendarRef}
            />
        );
    }
}
Answer posted by Dan Letecky [DayPilot]
17 days ago.

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).

Comment posted by Akshay
16 days ago.

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

Comment posted by Akshay
16 days ago.

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

Comment posted by Dan Letecky [DayPilot]
16 days ago.

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

Comment posted by Akshay
16 days ago.

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

Comment posted by Akshay
16 days ago.

Below error I m getting

Comment posted by Akshay
16 days ago.

PFA

Comment posted by Dan Letecky [DayPilot]
16 days ago.

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).

Comment posted by Akshay
16 days ago.

Can we connect is it possible your possible time

Comment posted by Akshay
16 days ago.

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

Comment posted by Akshay Gandotra
14 days ago.

Hey Dan,

Any update ?

Comment posted by Dan Letecky [DayPilot]
14 days ago.

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.
Comment posted by Akshay Gandotra
5 days ago.

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

Comment posted by Akshay Gandotra
5 days ago.

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>

)

}
Comment posted by Dan Letecky [DayPilot]
5 days ago.

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.)

Comment posted by Akshay Gandotra
3 days ago.

@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.

New Reply
This reply is
Attachments:
or drop files here
Your name (optional):