Apps
Users preview link
Calender Offical link Preview link
npm i @fullcalendar/vue3Inside Your template tags add
<FullCalendar :options="calendarOptions" /> Inside Your script tags add
import { onMounted } from "vue"
import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
import { INITIAL_EVENTS, createEventId } from "@/composables/calendardata";
import interactionPlugin, { Draggable } from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid";
const calendarOptions = {
plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
initialView: "dayGridMonth",
initialEvents: INITIAL_EVENTS,
editable: true, selectable: true,
selectMirror: true, dayMaxEvents: true, weekends: true,
select: handleDateSelect, eventClick: handleEventClick,
droppable: true,
drop: HandleDrop,
headerToolbar: {
left: "prev,next today", center: "title", right: "dayGridMonth,timeGridWeek,timeGridDay",
},
}
function HandleDrop(selectInfo: any) {
let title = selectInfo.draggedEl.outerText
let calendarApi = selectInfo.view.calendar
calendarApi.unselect()
if (title) {
calendarApi.addEvent({
id: createEventId(),
title, start: selectInfo.date, allDay: true
})
}
}
function handleDateSelect(selectInfo: any) {
let title = prompt('Please enter a new title for your event')
let calendarApi = selectInfo.view.calendar
calendarApi.unselect()
if (title) {
calendarApi.addEvent({
id: createEventId(),
title, start: selectInfo.startStr, end: selectInfo.endStr, allDay: selectInfo.allDay,
})
}
}
function handleEventClick(clickInfo: any) {
if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
clickInfo.event.remove()
}
}
onMounted(() => {
let buttons = document.getElementsByClassName('draggableButton')
for (var i = 0; i < buttons.length; i++) {
new Draggable(buttons[i]);
}
})Inside Your store ts tags add
let eventGuid = 0
let todayStr = new Date().toISOString().replace(/T.*$/, '')
export const INITIAL_EVENTS= [
{
id: createEventId(),
title: 'All-day event',
start: todayStr
},
{
id: createEventId(),
title: 'Timed event',
start: todayStr + 'T12:00:00'
},
{
id: createEventId(),
title: "event 1",
date: "2022-09-01"
},
{
id: createEventId(),
title: "BirthDay",
date: "2022-09-16"
},
{
id: createEventId(),
title: "All-day event",
date: "2022-09-04"
},
{
id: createEventId(),
title: "event",
date: "2022-09-20"
},
{
id: createEventId(),
title:"event 2",
date:"2022-10-07"
},
{
id: createEventId(),
title:"all-day event",
date:"2022-10-27"
},
{
id: createEventId(),
title:"event",
date:"2022-12-10"
},
{
id: createEventId(),
title:"event2",
date:"2022-12-12"
},
{
id: createEventId(),
title:"event",
date:"2022-11-1",
start:"T12:00:00"},
{
id: createEventId(),
title:"event",
date:"2022-11-18",},
{
id: createEventId(),
title:"event",
date:"2022-11-06",
},
{
id: createEventId(),
title:"All Day event",
date:"2022-12-06",
},
{
id: createEventId(),
title:"BirthDay Party",
date:"2022-12-22",
},
{
id: createEventId(),
title:"4p meeting",
date:"2022-12-11",
},
{
id: createEventId(),
title:"3:30p meeting",
date:"2022-12-12",
},
{
id: createEventId(),
title:"Tour with our team ",
date:"2023-01-16",
},
{
id: createEventId(),
title:"4p meeting ",
date:"2023-01-03",
},
{
id: createEventId(),
title:"event3",
date:"2023-01-06",
},
{
id: createEventId(),
title:"4p meeting",
date:"2023-01-22",
},
{
id: createEventId(),
title:"event1",
date:"2023-01-22",
},
{
id: createEventId(),
title:"3:30p meeting",
date:"2023-01-23",
},
{
id: createEventId(),
title:"3:30p meeting",
date:"2023-01-27",
},
]
export function createEventId() {
return String(eventGuid++)
}Gallery Preview link
npm i vue-easy-lightboxIn your main.ts file all the following code:
import Lightbox from 'vue-easy-lightbox'
.use(Lightbox)Inside Your template tags add
<figure v-for="(src, index) in image" :key="index" class="col-xl-3 col-md-4 col-sm-6 xl-33 box-col-33 "
@click="() => showImg(index)">
<a itemprop="contentUrl" data-size="1600x950">
<img :src="getImgUrl(src.image)" alt="Image description" class="img-thumbnail" />
</a>
<div class="caption">
</div>
</figure>
<template #light-box>
<vue-easy-lightbox :index="indexRef" :visible="visible" :imgs="lightBoxImages" @hide="handleHide">
</vue-easy-lightbox>
</template>Inside Your script tags add
import { ref, onMounted, defineAsyncComponent } from "vue"
import { image } from "@/core/data/masonry"
let Card9 = defineAsyncComponent(() => import("@/components/commen/card/cardData9.vue"))
let lightBoxImages = ref([])
let visible = ref(false)
let indexRef = ref(0)
function showImg(index: number) {
indexRef.value = index
visible.value = true
}
function handleHide() {
visible.value = false
}
function getImgUrl(path: string) {
return require('@/assets/images/' + path);
}
onMounted(() => {
masonryItems.forEach(item => {
lightBoxImages.value.push({ src: require('@/assets/images/' + item.image) })
})
})
Inside Your ts tags add
export const image = [
{
image: "lightgallry/01.jpg"
},
{
image: "lightgallry/02.jpg"
},
{
image: "lightgallry/03.jpg"
},
{
image: "lightgallry/04.jpg"
},
{
image: "lightgallry/05.jpg"
},
{
image: "lightgallry/011.jpg"
},
{
image: "lightgallry/010.jpg"
},
{
image: "lightgallry/08.jpg"
},
{
image: "lightgallry/09.jpg"
},
{
image: "lightgallry/010.jpg"
},
{
image: "lightgallry/011.jpg"
},
{
image: "lightgallry/012.jpg"
}
]
npm i vue-easy-lightboxIn your main.ts file all the following code:
import Lightbox from 'vue-easy-lightbox'
.use(Lightbox)Inside Your template tags add
<figure v-for="(src, index) in imgs" :key="index" class="col-xl-3 col-sm-6 xl-33 box-col-33 "
@click="() => showImg(index)">
<a>
<img :src="getImgUrl(src.image)" alt="Image description" class="img-fluid" />
<div class="caption description">
<h4>{{ src.title }}</h4>
<p>{{ src.descr }}</p>
</div>
</a>
</figure>
<template #light-box>
<vue-easy-lightbox :index="indexRef" :visible="visible" :imgs="lightBoxImages" @hide="handleHide">
</vue-easy-lightbox>
</template>Inside Your script tags add
import { ref, onMounted, defineAsyncComponent } from "vue"
import { imgs } from "@/core/data/masonry"
const Card9 = defineAsyncComponent(() => import("@/components/commen/card/cardData9.vue"))
let lightBoxImages = ref([])
let visible = ref<boolean>(false)
let indexRef = ref<number>(0)
function showImg(index: number) {
indexRef.value = index
visible.value = true
}
function handleHide() {
visible.value = false
}
function getImgUrl(path: string) {
return require('@/assets/images/' + path);
}
onMounted(() => {
masonryItems.forEach(item => {
lightBoxImages.value.push({ src: require('@/assets/images/' + item.image), title: item.title })
})
})
Inside Your ts tags add
export const imgs = [
{
title: "Portfolio Title",
descr: "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.",
image: "lightgallry/01.jpg"
},
{
title: "Portfolio Title",
descr: "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.",
image: "lightgallry/02.jpg"
},
{
title: "Portfolio Title",
descr: "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.",
image: "lightgallry/03.jpg"
},
{
title: "Portfolio Title",
descr: "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.",
image: "lightgallry/04.jpg"
},
{
title: "Portfolio Title",
descr: "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.",
image: "lightgallry/05.jpg"
},
{
title: "Portfolio Title",
descr: "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.",
image: "lightgallry/011.jpg"
},
{
title: "Portfolio Title",
descr: "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.",
image: "lightgallry/010.jpg"
},
{
title: "Portfolio Title",
descr: "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.",
image: "lightgallry/08.jpg"
},
{
title: "Portfolio Title",
descr: "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.",
image: "lightgallry/01.jpg"
},
{
title: "Portfolio Title",
descr: "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.",
image: "lightgallry/02.jpg"
},
{
title: "Portfolio Title",
descr: "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.",
image: "lightgallry/03.jpg"
},
{
title: "Portfolio Title",
descr: "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.",
image: "lightgallry/04.jpg"
},
{
title: "Portfolio Title",
descr: "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.",
image: "lightgallry/05.jpg"
},
{
title: "Portfolio Title",
descr: "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.",
image: "lightgallry/011.jpg"
},
{
title: "Portfolio Title",
descr: "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.",
image: "lightgallry/010.jpg"
},
{
title: "Portfolio Title",
descr: "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.",
image: "lightgallry/08.jpg"
}
]
npm i vue-easy-lightbox
npm i vue-masonry
In your main.ts file all the following code:
import Lightbox from 'vue-easy-lightbox'
import { VueMasonryPlugin } from 'vue-masonry';
.use(Lightbox)
.use(VueMasonryPlugin)Inside Your template tags add
<div v-masonry class="my-gallery row grid gallery" id="aniimated-thumbnials" itemscope>
<figure v-masonry-tile class="col-md-3 col-sm-6 grid-item" itemprop="associatedMedia" itemscope :key="index"
v-for="(item, index) in imags" @click="() => showImg(index)">
<a><img :src="getImgUrl(item.image)" class="img-thumbnail" /></a>
</figure>
</div>
<template #light-box>
<vue-easy-lightbox :index="indexRef" :visible="visible" :imgs="lightBoxImages" @hide="handleHide">
</vue-easy-lightbox>
</template>Inside Your script tags add
import { ref, onMounted, defineAsyncComponent } from "vue"
import { imags } from "@/core/data/masonry"
const Card9 = defineAsyncComponent(() => import("@/components/commen/card/cardData9.vue"))
let lightBoxImages = ref([])
let visible = ref(false)
let indexRef = ref(0)
function showImg(index: number) {
indexRef.value = index
visible.value = true
}
function handleHide() {
visible.value = false
}
function getImgUrl(path: string) {
return require('@/assets/images/' + path);
}
onMounted(() => {
masonryItems.forEach(item => {
lightBoxImages.value.push({ src: require('@/assets/images/' + item.image) })
})
})
Inside Your json tags add
export const imags = [
{
image: "masonry/1.jpg"
},
{
image: "masonry/2.jpg"
},
{
image: "masonry/3.jpg"
},
{
image: "masonry/4.jpg"
},
{
image: "masonry/6.jpg"
},
{
image: "masonry/5.jpg"
},
{
image: "masonry/7.jpg"
},
{
image: "masonry/8.jpg"
},
{
image: "masonry/9.jpg"
},
{
image: "masonry/10.jpg"
},
{
image: "masonry/11.jpg"
},
{
image: "masonry/12.jpg"
},
{
image: "masonry/13.jpg"
},
{
image: "masonry/14.jpg"
},
{
image: "masonry/15.jpg"
},
{
image: "masonry/1.jpg"
}
]
npm i vue-easy-lightbox
npm i vue-masonry
In your main.ts file all the following code:
import Lightbox from 'vue-easy-lightbox'
import { VueMasonryPlugin } from 'vue-masonry';
.use(Lightbox)
.use(VueMasonryPlugin)Inside Your template tags add
<div v-masonry class="my-gallery row grid gallery-with-description" id="aniimated-thumbnials" itemscope>
<figure v-masonry-tile class="grid-item col-xl-3 col-sm-6" :key="index" v-for="(item, index) in imagearray"
@click="() => showImg(index)">
<a>
<img :src="getImgUrl(item.image)" class="img-fluid" />
<div class="caption description">
<h4>{{ item.title }}</h4>
<p>{{ item.descr }}</p>
</div>
</a>
</figure>
</div>
<vue-easy-lightbox :index="indexRef" :visible="visible" :imgs="lightBoxImages" @hide="handleHide">
</vue-easy-lightbox>Inside Your script tags add
import { ref, onMounted, defineAsyncComponent } from "vue"
import { imagearray } from "@/core/data/masonry"
const Card9 = defineAsyncComponent(() => import("@/components/commen/card/cardData9.vue"))
let lightBoxImages = ref([])
let visible = ref<boolean>(false)
let indexRef = ref<number>(0)
function showImg(index: number) {
indexRef.value = index
visible.value = true
}
function handleHide() {
visible.value = false
}
function getImgUrl(path: string) {
return require('@/assets/images/' + path);
}
onMounted(() => {
masonry.forEach(item => {
lightBoxImages.value.push({ src: require('@/assets/images/' + item.image), title: item.title })
})
})
})
Inside Your json tags add
export const imagearray = [
{
image: "masonry/1.jpg",
title: "Portfolio Title",
descr: "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy."
},
{
image: "masonry/2.jpg",
title: "Portfolio Title",
descr: "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy."
},
{
image: "masonry/3.jpg",
title: "Portfolio Title",
descr: "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy."
},
{
image: "masonry/4.jpg",
title: "Portfolio Title",
descr: "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy."
},
{
image: "masonry/5.jpg",
title: "Portfolio Title",
descr: "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy."
},
{
image: "masonry/6.jpg",
title: "Portfolio Title",
descr: "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy."
},
{
image: "masonry/8.jpg",
title: "Portfolio Title",
descr: "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy."
},
{
image: "masonry/9.jpg",
title: "Portfolio Title",
descr: "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy."
},
{
image: "masonry/10.jpg",
title: "Portfolio Title",
descr: "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy."
},
{
image: "masonry/11.jpg",
title: "Portfolio Title",
descr: "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy."
},
{
image: "masonry/12.jpg",
title: "Portfolio Title",
descr: "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy."
},
{
image: "masonry/14.jpg",
title: "Portfolio Title",
descr: "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy."
},
{
image: "masonry/15.jpg",
title: "Portfolio Title",
descr: "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy."
},
{
image: "masonry/13.jpg",
title: "Portfolio Title",
descr: "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy."
}
]
Letter Box Preview link
Chat Preview link
Ecommerce Preview link
We have made many different applications to help you with your admin side work. Amongst those is an E-Commerce application
You can directly use complete E-commerce app to manage your E-commerce with ready-made functionality of Add to cart,Quick-view, and Checkout with Stripe as well as Paypal. Apart from that if you want to use it in your frontend application then you just need to change your json with your API data and you get complete workable E-commerce for your frontend.
