Another one Best Professional Calendar ever. looking for Angular version ?
Based on
viteforVue 3
npm i vue-pro-calendar
Import and inspect types
T_View,Configs,Appointment,T_LANGfrom vue-pro-calendar
| Prop | Type | Required | Default |
|---|---|---|---|
date |
string// iso string |
No | undefined |
view |
T_View |
No | "week" |
events |
Appointment[] |
No | [] |
loading |
boolean |
No | false |
config |
Configs |
No | DEFAULT_CONFIGS |
lang |
T_LANG |
No | only supported languages; default: undefined (the calendar will use browser locale). |
You can import
DEFAULT_CONFIGSfrom vue-pro-calendar
When you set
nativeDatepickertofalseorundefined, VCalendar DatePicker will be used.
When you set a property with type
T_Actiontoundefined, the action is disabled.
main.ts
import { ProCalendar } from "vue-pro-calendar";
//...
app.use(ProCalendar);App.vue
<script setup lang="ts">
import "vue-pro-calendar/style";
import { ref, type Ref } from "vue";
import type { Configs, Appointment, T_LANG } from "vue-pro-calendar";
const cfg = ref<Configs>({
viewEvent: undefined,
reportEvent: {
icon: true,
text: "",
},
searchPlaceholder: "",
eventName: "",
closeText: "",
nativeDatepicker: true,
todayButton: true,
firstDayOfWeek: 1,
});
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>@calendarClosed:
This event is fired when user clicks close button.
@fetchEvents:
This event is fired when date selected changes.
$event: { start: string; end: string }.startandendare iso string date.
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>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 "vue-pro-calendar"
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.viewis fired.