calendar fix contd

src/component/calendar/EventCalendar.jsx

@@ -40,13 +40,13 @@ export default function EventCalendar({draggedEvent, setDraggedEvent}) {
   }
 
   const onDrop = (event) => {
-    console.log('event', event)
+    // console.log('event', event)
         if(event){
             let newEvent = {
                 id: createEventId(),
                 title: event.draggedEl.innerText,
                 start: event.startStr,
-                end: event.endStr,
+                // end: event.endStr,
                 allDay: event.allDay,
                 ...event
             }
@@ -54,6 +54,13 @@ export default function EventCalendar({draggedEvent, setDraggedEvent}) {
         }
   }
 
+  const removeEvent = (event) => {
+    // let eventToRemove = event?.event?._def?.title
+    // let remainingEvent = currentEvents.filter(item => item.title != eventToRemove)
+    // setCurrentEvents(remainingEvent)
+    console.log('Event', event, currentEvents)
+  }
+
 
   function handleEventClick(clickInfo) {
     if (
@@ -87,9 +94,9 @@ export default function EventCalendar({draggedEvent, setDraggedEvent}) {
           weekends={weekendsVisible}
         //   initialEvents={INITIAL_EVENTS} // alternatively, use the `events` setting to fetch from a feed
           events={currentEvents}
-        //   select={handleDateSelect}
+          // select={handleDateSelect}
           eventContent={renderEventContent} // custom render function
-        //   eventClick={handleEventClick}
+          eventClick={handleEventClick}
           eventsSet={handleEvents} // called after events are initialized/added/changed/removed
           /* you can update a remote database when these fire:
           eventAdd={function(){}}
@@ -97,7 +104,7 @@ export default function EventCalendar({draggedEvent, setDraggedEvent}) {
           eventRemove={function(){}}
           */
 
-
+          eventRemove={removeEvent}
           droppable= {true} // this allows things to be dropped onto the calendar
           drop={onDrop}
         />

src/component/calendar/ExternalDraggable.jsx

@@ -6,12 +6,17 @@ const ExternalDraggable = ({dummyEvents}) => {
 
   useEffect(() => {
     // Make the external events draggable
-    new Draggable(eventContainerRef.current, {
+    const draggable = new Draggable(eventContainerRef.current, {
       itemSelector: ".fc-event",
       eventData: (eventEl) => ({
         title: eventEl.innerText.trim(),
       }),
     });
+
+    // Cleanup the Draggable instance on unmount
+    return () => {
+      draggable.destroy();
+    };
   }, []);
 
   return (

src/component/calendar/event-utils.js

@@ -2,19 +2,19 @@ let eventGuid = 0;
 let todayStr = new Date().toISOString().replace(/T.*$/, ''); // YYYY-MM-DD of today
 
 export const INITIAL_EVENTS = [
-  {
-    id: createEventId(),
-    title: 'All-day event',
-    start: new Date('2025-01-19'),
-    end: new Date('2025-01-20'),
-    // color: 'blue'
-  },
-  {
-    id: createEventId(),
-    title: 'Timed event',
-    start: todayStr + 'T12:00:00',
-    // color: 'red'
-  },
+  // {
+  //   id: createEventId(),
+  //   title: 'All-day event',
+  //   start: new Date('2025-01-19'),
+  //   end: new Date('2025-01-20'),
+  //   // color: 'blue'
+  // },
+  // {
+  //   id: createEventId(),
+  //   title: 'Timed event',
+  //   start: todayStr + 'T12:00:00',
+  //   // color: 'red'
+  // },
 ];
 
 export function createEventId() {