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

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

Asked by Siva
4 days ago.

Coding:

import React, { useState, useEffect, useCallback } from "react";
import {BrowserRouter as Router,Routes,Route,Link,useParams} from "react-router-dom";
import { Navbar, Nav } from "react-bootstrap";
import NavbarComp from "../Components/NavbarComp";
import profile from "../images/smrft.jpg";
import "../Admin";
import Viewemp from "./Viewemp";
import "./AdminCalendar.css";
import {DayPilot, DayPilotCalendar, DayPilotMonth, DayPilotNavigator} from "@daypilot/daypilot-lite-react";
import { DayPilotScheduler} from "daypilot-pro-react";

const AdminCalendar = () => { 
  const [calendarData, setCalendarData] = useState([]);
  const dateRef= DayPilot.Date.today()
  const params = useParams();
  const id = params.id;

  const getcalendardata = useCallback(() => {
    const res = fetch("http://127.0.0.1:7000/attendance/EmpcalendarId", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        id: id,
      }),
    })
    .then((res) => res.json())
    .then(
      (data) => {
        setCalendarData(data);
      },
      (error) => {
        console.log("Error");
      }
    );
}, []);
  useEffect(() => {
    getcalendardata();
  }, []);

  return (
    <body>
      <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 />


      <div className="AdminCalendar">
        <DayPilotMonth
          startDate={dateRef}
        />
      </div>
    </body>
  );
};
export default AdminCalendar;

This was my code...I Done a code using function not class...I want to call the API data to DaypilotMonth and display it in calendar.. I have setted the data into calendarData(setcalenderData) and I want to call that calendarData into DaypilotMonth tag to display the event.

The below attachment was my calendar and a Json format.

Answer posted by Dan Letecky [DayPilot]
10 hours ago.

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/

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