Top

Apps



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>
    </>
    );
};

Remove package from project

npm remove @fullcalendar/react @fullcalendar/core @fullcalendar/daygrid


npm i react-masonry-css
import Masonry from "react-masonry-css";

export default function MasonryGallery() {
const breakpointColumnsObj = {
default: 4,
1199: 3,
700: 2,
500: 1,
};

return (
<CardBody className="photoswipe-pb-responsive">
<Row className="my-gallery  grid gallery">
<Masonry breakpointCols={breakpointColumnsObj} className="my-gallery row grid gallery" columnClassName="col-md-3 col-sm-6 grid-item">
{MASONARY_IMAGE_DATA.map((element, index) => (
<figure key={index}>
    <img src={`${ImagePath}/${element.src}`} className="img-thumbnail" alt="" />
</figure>
))}
</Masonry>
</Row>
</CardBody>
);
};


        

Remove package from project

npm remove react-masonry-css


npm i react-masonry-css
import Masonry from "react-masonry-css";

export default function MasonryDescription() {

const masonryImageData=[
{
id: 1,
src: "1.jpg",
width: 4,
height: 3
},
{
id: 2,
src: "2.jpg",
width: 1,
height: 1
},
{
id: 3,
src: "3.jpg",
width: 3,
height: 4
},
]

const breakpointColumnsObj = {
default: 4,
1199: 3,
700: 2,
500: 1,
};

return (
<CardBody className="photoswipe-pb-responsive">
<Masonry breakpointCols={breakpointColumnsObj} className="my-gallery row grid gallery-with-description" columnClassName="grid-item col-xl-3 col-sm-6">
{masonryImageData.map((item, i) => (
<figure key={i}>
    <a href={Href}>
        <img className="img-thumbnail" src={`${ImagePath}/masonry/${item.src}`} alt="" />
        <div className="caption">
            <h4>{PortfolioTitle}</h4>
            <p>{"is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy."}</p>
        </div>
    </a>
</figure>
))}
</Masonry>
</CardBody>
);
};

Remove package from project

npm remove react-masonry-css