victorAnumudu
45 lines
1.5 KiB
React
45 lines
1.5 KiB
React
import React, { useEffect, useRef } from "react";
|
|
import { Draggable } from "@fullcalendar/interaction";
|
|
|
|
const ExternalDraggable = ({category}) => {
|
|
const eventContainerRef = useRef(null);
|
|
|
|
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')}
|
|
]
|
|
|
|
useEffect(() => {
|
|
// Make the external events draggable
|
|
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 (
|
|
<div ref={eventContainerRef} className="external-events">
|
|
{category && category.map((item, index) => {
|
|
let color = index % 4 === 0 ? 'fc-event-success' : index % 3 === 0 ? 'fc-event-danger' : index % 2 === 0 ? 'fc-event-warning' : 'fc-event-primary'
|
|
return (
|
|
<div key={item?.cid || index} className={`fc-event ${color}`} data-color={`${color}`} >
|
|
{item.description}
|
|
</div>
|
|
)
|
|
}
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ExternalDraggable;
|