From dc0f40dd154d51ba211213025b841788822f1a60 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Wed, 18 Dec 2024 15:57:31 +0100
Subject: [PATCH] calendar fixing update

---
 src/component/calendar/Calendar.jsx      |  3 +--
 src/component/calendar/EventCalendar.jsx | 28 ++++++++++++++----------
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/component/calendar/Calendar.jsx b/src/component/calendar/Calendar.jsx
index 3abad01..34ef007 100644
--- a/src/component/calendar/Calendar.jsx
+++ b/src/component/calendar/Calendar.jsx
@@ -5,7 +5,7 @@ import EventCalendar from "./EventCalendar";
 
 export default function Calendar(){
 
-    const [draggedEvent, setDraggedEvent] = useState()
+    const [draggedEvent, setDraggedEvent] = useState('undroppable')
     const handleDragStart = useCallback((event) => setDraggedEvent(event), [])
 
     const dummyEvents = [
@@ -19,7 +19,6 @@ export default function Calendar(){
         <>
             <BreadcrumbComBS title='Calendar' paths={['Dashboard', 'Calendar']} />
             <div className="row">
-                {/*<div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
                 <div className="col-lg-12">
                     <div className="card card-statistics">
                         <div className="card-header">
diff --git a/src/component/calendar/EventCalendar.jsx b/src/component/calendar/EventCalendar.jsx
index 9393322..74933cb 100644
--- a/src/component/calendar/EventCalendar.jsx
+++ b/src/component/calendar/EventCalendar.jsx
@@ -16,6 +16,7 @@ export default function EventCalendar({draggedEvent, setDraggedEvent}) {
 
     const moveEvent = useCallback(
       ({ event, start, end, isAllDay: droppedOnAllDaySlot = false }) => {
+        // console.log('yes')
         const { allDay } = event
         if (!allDay && droppedOnAllDaySlot) {
           event.allDay = true
@@ -28,6 +29,7 @@ export default function EventCalendar({draggedEvent, setDraggedEvent}) {
           const existing = prev.find((ev) => ev.id === event.id) ?? {}
           const filtered = prev.filter((ev) => ev.id !== event.id)
           return [...filtered, { ...existing, start, end, allDay: event.allDay }]
+          // return [...prev, { ...event }]
         })
       },
       [setMyEvents]
@@ -35,14 +37,6 @@ export default function EventCalendar({draggedEvent, setDraggedEvent}) {
 
     const [displayDragItemInCell, setDisplayDragItemInCell] = useState(true)
     
-    const eventPropGetter = useCallback(
-        (event) => ({
-            ...(event.isDraggable
-                ? { className: 'isDraggable' }
-                : { className: 'nonDraggable' }),
-            }),
-            []
-        )
     
       const dragFromOutsideItem = useCallback(() => draggedEvent === 'undroppable' ? null : draggedEvent, [draggedEvent])
     
@@ -60,6 +54,16 @@ export default function EventCalendar({draggedEvent, setDraggedEvent}) {
         },
         [draggedEvent]
       )
+
+
+      const eventPropGetter = useCallback(
+        (event) => ({
+            ...(event.isDraggable
+                ? { className: 'isDraggable' }
+                : { className: 'nonDraggable' }),
+            }),
+            []
+      )
     
       const newEvent = useCallback(
         (event) => {
@@ -109,16 +113,18 @@ export default function EventCalendar({draggedEvent, setDraggedEvent}) {
                 dragFromOutsideItem={
                 displayDragItemInCell ? dragFromOutsideItem : null
                 }
-                draggableAccessor="isDraggable"
-                // eventPropGetter={eventPropGetter}
+                eventPropGetter={eventPropGetter}
+            // draggableAccessor="isDraggable"
             localizer={localizer}
             events={myEvents}
             startAccessor="start"
             endAccessor="end"
             style={{ height: 500 }}
+            // onEventResize={resizeEvent}
+            resizable
             onEventDrop={moveEvent}
             onDropFromOutside={onDropFromOutside}
-            onDragOverFromOutside={customOnDragOverFromOutside}
+            // onDragOverFromOutside={customOnDragOverFromOutside}
         />
     </div>
   )