calendar fix contd

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;