started calendar api integration

src/component/calendar/EventCalendar.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { formatDate } from '@fullcalendar/core';
 import FullCalendar from '@fullcalendar/react';
 import dayGridPlugin from '@fullcalendar/daygrid';
@@ -6,9 +6,9 @@ import timeGridPlugin from '@fullcalendar/timegrid';
 import interactionPlugin from '@fullcalendar/interaction';
 import { INITIAL_EVENTS, createEventId } from './event-utils';
 
-export default function EventCalendar({draggedEvent, setDraggedEvent, removeAfterDrop, setDummyEvents}) {
+export default function EventCalendar({removeAfterDrop, eventList}) {
   const [weekendsVisible, setWeekendsVisible] = useState(true);
-  const [currentEvents, setCurrentEvents] = useState(INITIAL_EVENTS);
+  const [currentEvents, setCurrentEvents] = useState([]);
 
   function handleWeekendsToggle() {
     setWeekendsVisible(!weekendsVisible);
@@ -51,9 +51,9 @@ export default function EventCalendar({draggedEvent, setDraggedEvent, removeAfte
                 ...event
             }
             setCurrentEvents(prev => ([...prev, newEvent]))
-            if(removeAfterDrop){
-              setDummyEvents(prev => prev.filter(item => item.title != newEvent.title))
-            }
+            // if(removeAfterDrop){
+            //   setDummyEvents(prev => prev.filter(item => item.title != newEvent.title))
+            // }
         }
   }
 
@@ -78,13 +78,18 @@ export default function EventCalendar({draggedEvent, setDraggedEvent, removeAfte
     // setCurrentEvents(events);
   }
 
+  useEffect(()=>{
+    let newEventList = eventList.map(item => ({...item, start: new Date(item?.start)}))
+    setCurrentEvents(newEventList)
+  },[eventList])
+
   return (
     <div className="demo-app">
       <div className="demo-app-main">
         <FullCalendar
           plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
           headerToolbar={{
-            left: 'prev next today',
+            left: 'prev,next,today',
             center: 'title',
             right: 'dayGridMonth,timeGridWeek,timeGridDay',
           }}         
@@ -96,17 +101,18 @@ export default function EventCalendar({draggedEvent, setDraggedEvent, removeAfte
           weekends={weekendsVisible}
         //   initialEvents={INITIAL_EVENTS} // alternatively, use the `events` setting to fetch from a feed
           events={currentEvents}
-          select={handleDateSelect}
           eventContent={renderEventContent} // custom render function
-          // eventClick={handleEventClick}
           eventsSet={handleEvents} // called after events are initialized/added/changed/removed
+          // select={handleDateSelect}
+          // eventClick={handleEventClick}
           /* you can update a remote database when these fire:
           eventAdd={function(){}}
           eventChange={function(){}}
           eventRemove={function(){}}
           */
 
-          eventRemove={removeEvent}
+          // eventBackgroundColor='purple'
+          // eventRemove={removeEvent}
           droppable= {true} // this allows things to be dropped onto the calendar
           drop={onDrop}
         />