src/component/calendar/Calendar.jsx

@@ -1,14 +1,15 @@
 import React, { useCallback, useState } from "react";
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
 import EventCalendar from "./EventCalendar";
+import ExternalDraggable from "./ExternalDraggable";
 
 
 export default function Calendar(){
 
-    const [draggedEvent, setDraggedEvent] = useState('undroppable')
+    // const [draggedEvent, setDraggedEvent] = useState('undroppable')
-    const handleDragStart = (event) => {
+    // const handleDragStart = (event) => {
-        setDraggedEvent(event)
+    //     setDraggedEvent(event)
-    }
+    // }
 
     const dummyEvents = [
         {id: '1111', title: 'Family Vacation', color: 'fc-event-primary', start: new Date('2025-01-18')},
@@ -38,7 +39,7 @@ export default function Calendar(){
                                         <p className="mt-3">
                                             Drag and drop your event or click in the calendar.
                                         </p>
-                                        {dummyEvents.map((item, index) => (
+                                        {/* {dummyEvents.map((item, index) => (
                                             <div key={index} className={`fc-event ${item.color}`} data-color={`${item.color}`} 
                                                 draggable="true"
                                                 onDragStart={() =>
@@ -47,7 +48,8 @@ export default function Calendar(){
                                             >
                                                 <span></span> {item.title}
                                             </div>
-                                        ))}
+                                        ))} */}
+                                        <ExternalDraggable dummyEvents={dummyEvents} />
                                         <div className="form-check">
                                             <input className="form-check-input" type="checkbox" value=""
                                                    id="defaultCheck1" />
@@ -60,7 +62,7 @@ export default function Calendar(){
                                 <div className="col-xl-9">
                                     <div className="event-calendar">
                                         {/* <EventCalendar draggedEvent={draggedEvent} setDraggedEvent={setDraggedEvent} /> */}
-                                        <EventCalendar draggedEvent={draggedEvent} setDraggedEvent={setDraggedEvent} />
+                                        <EventCalendar />
                                     </div>
                                 </div>
                             </div>

src/component/calendar/EventCalendar.jsx

@@ -39,37 +39,22 @@ export default function EventCalendar({draggedEvent, setDraggedEvent}) {
     }
   }
 
-//   const onDrop = useCallback(
+  const onDrop = (event) => {
-//         (event) => {
+    console.log('event', event)
-//         //   if (draggedEvent === 'undroppable') {
+        if(event){
-//         //     setDraggedEvent(null)
+            let newEvent = {
-//         //     return
+                id: createEventId(),
-//         //   }
+                title: event.draggedEl.innerText,
-
+                start: event.startStr,
-//         //   let calendarApi;
+                end: event.endStr,
-
+                allDay: event.allDay,
-//         //   calendarApi.unselect(); // clear date selection
+                ...event
-
+            }
-//         //   calendarApi.addEvent({
+            setCurrentEvents(prev => ([...prev, newEvent]))
-//         //     id: createEventId(),
+        }
-//         //     allDay: selectInfo.allDay,
-//         //     end: selectInfo.endStr,
-//         //     start: selectInfo.startStr,
-//         //     title,
-//         //     ...draggedEvent
-//         //   });
-
-//         //   setDraggedEvent(null)
-//           console.log('EVENT', event)
-//         },
-//         [draggedEvent]
-//   )
-
-  const onDrop = 
-    (dropInfo) => {
-      console.log('dropInfo', dropInfo)
   }
 
+
   function handleEventClick(clickInfo) {
     if (
       confirm(
@@ -112,9 +97,9 @@ export default function EventCalendar({draggedEvent, setDraggedEvent}) {
           eventRemove={function(){}}
           */
 
-          dropAccept= '.fc-event'
+
           droppable= {true} // this allows things to be dropped onto the calendar
-          drop= {onDrop}
+          drop={onDrop}
         />
       </div>
     </div>

src/component/calendar/ExternalDraggable.jsx

@@ -0,0 +1,28 @@
+import React, { useEffect, useRef } from "react";
+import { Draggable } from "@fullcalendar/interaction";
+
+const ExternalDraggable = ({dummyEvents}) => {
+  const eventContainerRef = useRef(null);
+
+  useEffect(() => {
+    // Make the external events draggable
+    new Draggable(eventContainerRef.current, {
+      itemSelector: ".fc-event",
+      eventData: (eventEl) => ({
+        title: eventEl.innerText.trim(),
+      }),
+    });
+  }, []);
+
+  return (
+    <div ref={eventContainerRef} className="external-events">
+      {dummyEvents.map((item, index) => (
+          <div key={index} className={`fc-event ${item.color}`} data-color={`${item.color}`} >
+              {item.title}
+          </div>
+      ))}
+    </div>
+  );
+};
+
+export default ExternalDraggable;

src/component/calendar/event-utils.js

@@ -15,13 +15,6 @@ export const INITIAL_EVENTS = [
     start: todayStr + 'T12:00:00',
     // color: 'red'
   },
-  {
-    id: createEventId(),
-    title: 'Timed event 2',
-    start: new Date('2025-01-25'),
-    start: new Date('2025-01-26'),
-    // color: 'blue'
-  },
 ];
 
 export function createEventId() {

src/css/style.scss

@@ -141,6 +141,7 @@ $event-padding: 10px;
   color: #fff!important;
   border: none;
   background-color: #8E54E9!important;
+  text-transform: capitalize !important;
 }
 
 .fc-event.fc-event-draggable.fc-event-start.fc-event-end.fc-daygrid-event,