How I can Update events coming from api response..?

You need to get a reference to the DayPilot.Month object (using "ref" attribute) and call its update() method to display the events.

You can find an example here (see the "How to load calendar event data?" section):
https://doc.daypilot.org/month/react/

Thank you. But the data was not displaying in the calendar.

I have tried that but data was not displaying in the calendar and I need to post id from the API I have mentioned as post method and I have used get method to get the data from the API.I need to get the data based on id in the post method.

Coding:

import React, {Component,useState} from 'react';
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link,
  useParams,
} from "react-router-dom";
import {DayPilot, DayPilotMonth} from "daypilot-pro-react";

class Month extends Component {
  constructor(props) {
    super(props);
    this.calendarRef = React.createRef();
    this.state = {
      startDate: DayPilot.Date.today()
    };
  }

  get calendar() {
    return this.calendarRef.current.control;
  }
  
  componentDidMount() {
    this.loadEvents();
  }
  
  async loadEvents() {
    const {result} = await DayPilot.Http.post("http://127.0.0.1:7000/attendance/EmpcalendarId");
    const {res} = await DayPilot.Http.get("http://127.0.0.1:7000/attendance/admincalendar") 
    console.log("Data:",result)
    console.log("Data:",res)
    this.calendar.update({res});
  }

  render() {
    return (
      <div>
        <DayPilotMonth
          {...this.state}
          ref={this.calendarRef}
        />
      </div>
    );
  }
}

export default Month;

The DayPilot.Http.post() and DayPilot.Http.get() methods return an object that holds the response converted from JSON in the "data" property:

https://api.daypilot.org/daypilot-http-post/
https://api.daypilot.org/daypilot-http-get/

The example in the docs https://doc.daypilot.org/month/react/() uses the destructuring assignment (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) to save the value of the "data" property to a standalone "data" variable:

const {data} = await DayPilot.Http.get(`/api/Events?start=${start}&end=${end}`);

If you want to save it under a different name, you can do it like this:

const {data: events} = await DayPilot.Http.get(`/api/Events?start=${start}&end=${end}`);
// now you can access the "events" variable

The parameter of the update() method (https://api.daypilot.org/daypilot-month-update/) can be an "options" object with properties that will be applied to the monthly calendar. The names of the properties are not random but they have to be one of the recognized properties (https://api.daypilot.org/daypilot-month-properties/).

You can update events like this:

const events = [ /* ... */ ];
this.calendar.update({events});

which is the same as:

const events = [ /* ... */ ];
this.calendar.update({events: events});

If you call:

this.calendar.update({res});

it will update the "res" property of the monthly calendar. This property is not recognized and the update will have no effect.

I was using function in my code not class.. How can I update events and get events based on time not date.
The start and end value should be consists of time like 9:00 am & 5:00 pm and to be displayed in the same date.

I want to get events with same id....?

Coding:

import React, {useEffect, useState} from 'react';
import "../Admin";
import profile from "../images/smrft.jpg";
import NavbarComp from "../Components/NavbarComp";
import { Navbar, Nav } from "react-bootstrap";
import { useNavigate } from "react-router-dom";
import {BrowserRouter as Router,Link,useParams} from "react-router-dom";
import Viewemp from "./Viewemp";
import "./AdminCalendar.css";
import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";

function Admincalendar() {
const params = useParams();
const id = params.id;

let [events, setEvents] = useState("");
const timesheetRef = React.createRef();

function timesheet() {
return timesheetRef.current.control;
}

events = {
locale: "en-us",
onBeforeRowHeaderRender: (args) => {
args.row.horizontalAlignment = "center";
},
crosshairType: "Header",
timeHeaders: [{"groupBy":"Hour"},{"groupBy":"Cell","format":"mm"}],
scale: "CellDuration",
cellDuration: 15,
viewType: "Days",
startDate: DayPilot.Date.today().firstDayOfMonth(),
days: DayPilot.Date.today().daysInMonth(),
showNonBusiness: true,
businessWeekends: false,
floatingEvents: true,
eventHeight: 30,
groupConcurrentEvents: false,
eventStackingLineHeight: 100,
allowEventOverlap: true,
allowAllEventbyId: true,
allowAllEvent: true,
timeRangeSelectedHandling: "Enabled",
}
const modal = {
id: id
};
useEffect(() => {(async () => {
const {data: result} = await DayPilot.Http.post("http://127.0.0.1:7000/attendance/EmpcalendarId",modal);
console.log("Data:",result);
timesheet().update({events: result});
})();}, []);

return (
<div>
<div>
<style>{"body { background-color: rgb(255, 255, 255); }"}</style>
<div className="main"></div>
<div className="logo">
<img src={profile} className="smrft_logo" alt="logo" />
</div>
</div>
<Navbar
style={{ width: "500px", marginLeft: "500px", marginTop: "-90px" }}
>
<Navbar.Toggle aria-controls="navbarScroll" />
<Navbar.Collapse id="navbarScroll">
<Nav
className="mr-auto my-2 my-lg-0"
style={{ maxHeight: "200px" }}
navbarScroll
>
<Nav.Link as={Link} to="/">
<div style={{ color: "green", fontFamily: "cursive" }}>Home</div>
</Nav.Link>
<Nav.Link as={Link} to="/Admin/Viewemp">
<div style={{ color: "green", fontFamily: "cursive" }}>
Employee Details
</div>
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
<br/>
<br/>
<div>
<DayPilotScheduler
{...events}
ref={timesheetRef}
/>
</div>
</div>
);
}

export default Admincalendar;

The above code has the event with same id which was not allowing .It shows Duplicate event IDs are not allowed: _103. Is there any Inbuilt function to access events with same id or How can I add events with same id..