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