npm i @fullcalendar/react @fullcalendar/core @fullcalendar/daygrid

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: "#33BFBF",
      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>
    </>
  );
};