import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin, { Draggable } from "@fullcalendar/interaction";
import FullCalendar from "@fullcalendar/react";

const DragCalendar = () => {
const [openCalender, setOpenCalender] = useState(false);

const state = CALENDAR_INITIAL_DATA;
useEffect(() => {
  const draggableEl = document.getElementById("external-events") as HTMLElement;
  new Draggable(draggableEl, {
    itemSelector: ".fc-event",
    eventData: function (eventEl) {
      let title = eventEl.getAttribute("title");
      let id = eventEl.getAttribute("id");
      return {
        title: title,
        id: id,
      };
    },
  });
}, []);

const calenderEventClick = (eventClick: EventClickArg) => {
  Swal.fire({
    title: eventClick.event.title,
    html: `
      <div class="table-responsive">
        <table class="table">
          <tbody>
            <tr>
              <td>Title</td>
                <td><strong>${eventClick.event.title}</strong></td>
            </tr>
            <tr>
                <td>Start Time</td>
                <td><strong>${eventClick.event.start}</strong></td>
            </tr>
          </tbody>
        </table>
      </div>`,
    showCancelButton: true,
    cancelButtonColor: "#7A70BA",
    confirmButtonColor: "#d33",
    confirmButtonText: "Remove Event",
    cancelButtonText: "Close",
  }).then((result) => {
    if (result.value) {
      eventClick.event.remove();
      Swal.fire("Deleted!", "Your Event has been deleted.", "success");
    }
  });
};

return (
<>
 <Col xxl="3" className="box-col-4e">
   <div className="md-sidebar mb-3">
     <Button tag="a" color="primary" className="md-sidebar-toggle" href={Href} onClick={() => setOpenCalender(!openCalender)}>
       {CalendarFilter}
     </Button>
     <div className={`md-sidebar-aside job-left-aside custom-scrollbar ${openCalender ? "open" : ""}`}>
       <div id="external-events">
         <H3>{DraggableEvents}</H3>
         <div id="external-events-list" className="mt-3">
           {state.events.map((event, index) => (
             <div className={`fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event`} title={event.title} key={index}>
               <div className="fc-event-main">
                 <i className={`me-2 ${event.icon}`}></i>
                 {event.title}
               </div>
             </div>
           ))}
         </div>
         <P>
           <Input className="checkbox_animated" id="drop-remove" type="checkbox" />
           <Label htmlFor="drop-remove" check>
             {RemoveAfterDrop}
           </Label>
         </P>
       </div>
     </div>
   </div>
   </Col>
   <Col xl="9" md="8">
     <div className="demo-app-calendar" id="mycalendartest">
       <FullCalendar eventClick={calenderEventClick} rerenderDelay={10} eventDurationEditable={false} editable={true} droppable={true} plugins={[dayGridPlugin, interactionPlugin]} events={state.calendarEvents} />
     </div>
   </Col>
</>
);
};
              

npm uninstall @fullcalendar/react @fullcalendar/core @fullcalendar/daygrid