Apps
Users preview link


Calender Offical link Preview link

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
Gallery Preview link

npm i react-photoswipe-gallery
import { Gallery, Item } from "react-photoswipe-gallery";
const galleryData = ["01.jpg", "02.jpg", "03.jpg", "04.jpg", "05.jpg", "06.jpg", "07.jpg", "08.jpg", "09.jpg", "010.jpg", "011.jpg", "012.jpg"];
const ImageGallery = () => {
return (
<Card>
<CardBody className="gallery my-gallery">
<Row>
<Gallery>
{galleryData.map((item, i) => (
<Col xl={3} md={4} xs={6} key={i}>
<figure>
<Item original={`${ImagePath}/big-lightgallry/${item}`} width="1024" height="768">
{({ ref, open }) => (
<Link href={Href} onClick={open}>
<img className='img-thumbnail' ref={ref} src={`${ImagePath}/big-lightgallry/${item}`} alt='' />
</Link>
)}
</Item>
</figure>
</Col>
))}
</Gallery>
</Row>
</CardBody>
</Card>
);
};
Remove package from project
npm remove react-photoswipe-gallery

npm i react-photoswipe-gallery
import { Gallery, Item } from "react-photoswipe-gallery";
const galleryData = ["01.jpg", "02.jpg", "03.jpg", "04.jpg", "05.jpg", "06.jpg", "07.jpg", "08.jpg", "09.jpg", "010.jpg", "011.jpg", "012.jpg"];
export default function ImageGalleryDescription() {
return (
<Card>
<CardBody className="gallery my-gallery">
<Row>
<Gallery>
{galleryData.map((item, i) => (
<Col xl={3} md={4} xs={6}>
<figure key={i}>
<Item original={dynamicImage(`big-lightgallry/${item}`)} width="1024" height="768">
{({ ref, open }) => (
<Link to={Href} onClick={open}>
<img className='img-thumbnail' ref={ref} src={`${ImagePath}/big-lightgallry/${item}`} 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>
</Link>
)}
</Item>
</figure>
</Col>
))}
</Gallery>
</Row>
</CardBody>
</Card>
);
};
Remove package from project
npm remove react-photoswipe-gallery

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

Email Preview link

Blog Preview link

Chat Preview link


Ecommerce Preview link





