calendar fixing contd

docker-compose.yml

@@ -16,6 +16,7 @@ services:
       - ./:/usr/src/app
       - ./src/:/usr/src/app/src
       - ./run.sh:/usr/src/app/run.sh
+      - ./node_modules/:/usr/src/app/node_modules
     extra_hosts:
       - api.mermsemr.com:10.10.33.15
       - devapi.mermsemr.com:10.10.33.15

src/component/calendar/Calendar.jsx

@@ -11,13 +11,34 @@ export default function Calendar(){
     //     setDraggedEvent(event)
     // }
 
-    const dummyEvents = [
+    const events = [
         {id: '1111', title: 'Family Vacation', color: 'fc-event-primary', start: new Date('2025-01-18')},
         {id: '2222', title: 'Meeting In Office', color: 'fc-event-warning', start: new Date('2025-01-19')},
         {id: '3333', title: 'Client Call', color: 'fc-event-danger', start: new Date('2025-01-22')},
         {id: '4444', title: 'Interview', color: 'fc-event-success', start: new Date('2025-01-1')}
     ]
 
+    const [dummyEvents, setDummyEvents] = useState(events)
+
+    const [removeAfterDrop, setRemoveAfterDrop] = useState(false)
+
+    const [newEvent, setNewEvent] = useState({
+        title: '', color: ''
+    })
+
+    const handleEditEvent = ({target:{name,value}}) => {
+        setNewEvent(prev => ({...prev, [name]:value}))
+    }
+
+    const handleAddNewEvent = () => {
+        if(newEvent.title && newEvent.color){
+            const eventToAdd = {...newEvent}
+            setDummyEvents(prev => ([...prev, eventToAdd]))
+            setNewEvent({title: '', color: ''})
+        }
+    }
+
+
     return(
         <>
             <BreadcrumbComBS title='Calendar' paths={['Dashboard', 'Calendar']} />
@@ -51,8 +72,8 @@ export default function Calendar(){
                                         ))} */}
                                         <ExternalDraggable dummyEvents={dummyEvents} />
                                         <div className="form-check">
-                                            <input className="form-check-input" type="checkbox" value=""
+                                            <input className="form-check-input" type="checkbox" value={removeAfterDrop}
-                                                   id="defaultCheck1" />
+                                                   id="defaultCheck1" onChange={() => setRemoveAfterDrop(prev => !prev)} />
                                                 <label className="form-check-label" htmlFor="defaultCheck1">
                                                     Remove After Drop
                                                 </label>
@@ -62,7 +83,7 @@ export default function Calendar(){
                                 <div className="col-xl-9">
                                     <div className="event-calendar">
                                         {/* <EventCalendar draggedEvent={draggedEvent} setDraggedEvent={setDraggedEvent} /> */}
-                                        <EventCalendar />
+                                        <EventCalendar removeAfterDrop={removeAfterDrop} setDummyEvents={setDummyEvents} />
                                     </div>
                                 </div>
                             </div>
@@ -86,15 +107,16 @@ export default function Calendar(){
                             <form>
                                 <div className="form-group">
                                     <label>Event Name</label>
-                                    <input type="email" className="form-control" id="eventname" />
+                                    <input type="email" className="form-control" id="eventname" name='title' value={newEvent.title} onChange={handleEditEvent} />
                                 </div>
                                 <div className="form-group">
                                     <label>Choose Event Color</label>
-                                    <select className="form-control">
+                                    <select className="form-control" name='color' value={newEvent.color} onChange={handleEditEvent}>
-                                        <option>Primary</option>
+                                        <option value={''}>Select</option>
-                                        <option>Warning</option>
+                                        <option value={'fc-event-primary'}>Primary</option>
-                                        <option>Success</option>
+                                        <option value={'fc-event-warning'}>Warning</option>
-                                        <option>Danger</option>
+                                        <option value={'fc-event-success'}>Success</option>
+                                        <option value={'fc-event-danger'}>Danger</option>
                                     </select>
                                 </div>
 
@@ -102,7 +124,7 @@ export default function Calendar(){
                         </div>
                         <div className="modal-footer">
                             <button type="button" className="btn btn-danger" data-bs-dismiss="modal">Close</button>
-                            <button type="button" className="btn btn-success">Save changes</button>
+                            <button type="button" className="btn btn-success" onClick={handleAddNewEvent}>Save changes</button>
                         </div>
                     </div>
                 </div>

src/component/calendar/EventCalendar.jsx

@@ -6,7 +6,7 @@ import timeGridPlugin from '@fullcalendar/timegrid';
 import interactionPlugin from '@fullcalendar/interaction';
 import { INITIAL_EVENTS, createEventId } from './event-utils';
 
-export default function EventCalendar({draggedEvent, setDraggedEvent}) {
+export default function EventCalendar({draggedEvent, setDraggedEvent, removeAfterDrop, setDummyEvents}) {
   const [weekendsVisible, setWeekendsVisible] = useState(true);
   const [currentEvents, setCurrentEvents] = useState(INITIAL_EVENTS);
 
@@ -40,20 +40,29 @@ 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
             }
             setCurrentEvents(prev => ([...prev, newEvent]))
+            if(removeAfterDrop){
+              setDummyEvents(prev => prev.filter(item => item.title != newEvent.title))
+            }
         }
   }
 
+  const removeEvent = (event) => {
+    let eventToRemove = event?.event?._def?.publicId
+    let remainingEvent = currentEvents.filter(item => item.id != eventToRemove)
+    setCurrentEvents(remainingEvent)
+  }
+
 
   function handleEventClick(clickInfo) {
     if (
@@ -87,9 +96,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 +106,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(),
+  //   id: createEventId(),
-    title: 'All-day event',
+  //   title: 'All-day event',
-    start: new Date('2025-01-19'),
+  //   start: new Date('2025-01-19'),
-    end: new Date('2025-01-20'),
+  //   end: new Date('2025-01-20'),
-    // color: 'blue'
+  //   // color: 'blue'
-  },
+  // },
-  {
+  // {
-    id: createEventId(),
+  //   id: createEventId(),
-    title: 'Timed event',
+  //   title: 'Timed event',
-    start: todayStr + 'T12:00:00',
+  //   start: todayStr + 'T12:00:00',
-    // color: 'red'
+  //   // color: 'red'
-  },
+  // },
 ];
 
 export function createEventId() {