@lbgm/pro-calendar-vue v1.1.6
Pro Calendar
Another one Best Professional Calendar ever
Based on
vite
forVue 3
Install
npm i @lbgm/pro-calendar-vue
Screenshot with Native Datepicker
Screenshot with VCalendar Datepicker
Props & Types
type T_View = 'day' | 'week' | 'month';
type T_Action = {
icon?: boolean;
text?: string;
}
type Configs = {
viewEvent?: T_Action;
reportEvent?: T_Action;
searchPlaceholder?: string;
eventName?: string;
closeText?: string;
nativeDatepicker?: boolean;
}
type Appointment = {
id: string;
name: string;
date: string; //DateIsoString
keywords: string;
comment?: string;
createdAt?: string; //DateIsoString
updatedAt?: string; //DateIsoString
}
// interface
interface Props {
date?: string;
view?: T_View;
events?: Appointment[];
loading?: boolean;
config?: Configs;
}
// defaults
{
date: undefined,
view: "week",
events: () => [],
loading: false,
config: () => ({
viewEvent: {
icon: true,
text: "",
},
reportEvent: {
icon: true,
text: "",
},
searchPlaceholder: "",
eventName: "",
closeText: "",
nativeDatepicker: true,
}),
}
nativeDatepicker
:
false or undefined : use VCalendar DatePicker instead
property?: T_Action
:
undefined : the action is disabled
Use
main.ts
import { ProCalendar } from "@lbgm/pro-calendar-vue";
//...
app.use(ProCalendar);
App.vue
<script setup lang="ts">
import "@lbgm/pro-calendar-vue/style";
import { ref, type Ref } from "vue";
import type { Configs, Appointment } from "@lbgm/pro-calendar-vue";
const cfg = ref<Configs>({
viewEvent: undefined,
reportEvent: {
icon: true,
text: "",
},
searchPlaceholder: "",
eventName: "",
closeText: "",
nativeDatepicker: true,
});
const evts: Ref<Appointment[]> = ref([
{
date: "2022-11-19T14:00:00.000Z",
comment: "",
id: "cl32rbkjk1700101o53e3e3uhn",
keywords: "Projet BAMBA",
name: "MONTCHO Kévin",
},
//...
]);
</script>
<template>
<!-- all props are optional -->
<pro-calendar
:events="evts"
:loading="false"
:config="cfg"
view="month"
date="2022-11-10T00:00:00.000Z"
@calendarClosed="void 0"
@fetchEvents="void 0"
/>
</template>
Events
@calendarClosed
:
This event is fired when user clicks close button.
@fetchEvents
:
This event is fired when date selected changes.
$event: { start: string; end: string }
.start
andend
are iso string date.
Slots
Draw your own calendar using scoped slots
<pro-calendar
:events="evts"
:loading="false"
:config="cfg"
view="week"
date="'isoStringDate'"
>
<template #leftSwitchArrow>
<!-- replace left switch arrow with this slot -->
</template>
<template #rightSwitchArrow>
<!-- replace left switch arrow with this slot -->
</template>
<template #closeButton>
<!-- replace close button with this slot -->
</template>
<template #loader="{ calendarGotLoading }">
<!-- replace calendar loader with this slot -->
</template>
<template #searchIcon>
<!-- replace search widget icon with this slot -->
</template>
<template #dateLeftArrow>
<!-- replace date picker left arrow with this -->
</template>
<template #dateRightArrow>
<!-- replace date picker right arrow with this -->
</template>
<template #sideEvent="{ dateSelected, calendarEvents }">
<!-- use this slot to show side event in appearance you want -->
<!--
dateSelected: Date;
calendarEvents: Appointment[]; // all events
-->
</template>
<template #eventCard="{ date, time, cardEvent }">
<!-- use this slot to show calendar event in appearance you want -->
<!--
date: Date;
time: string;
cardEvent: Appointment[]; // events according to date/time
-->
</template>
</pro-calendar>
Custom HTML Events fired
calendar.request.view
& calendar.request.report
When the user clicks on view or report action, a custom html event is fired with the id of event in detail. You can listen these events like this:
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { E_CustomEvents } from "@lbgm/pro-calendar-vue"
onMounted(() => {
[E_CustomEvents.VIEW, E_CustomEvents.REPORT].forEach((e: string) => {
document.body.addEventListener(e, (event: Event | CustomEvent) => {
console.log({ event });
});
});
});
</script>
On default
#sideEvent template
, when user clicks on event,calendar.request.view
is fired.
Support me ?
9 months ago
10 months ago
10 months ago
9 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago