Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lbgm/vue-pro-calendar
Professional Calendar for Vue
https://github.com/lbgm/vue-pro-calendar
calendar pro professional typescript vite vue vuejs
Last synced: 2 days ago
JSON representation
Professional Calendar for Vue
- Host: GitHub
- URL: https://github.com/lbgm/vue-pro-calendar
- Owner: lbgm
- License: gpl-3.0
- Created: 2022-11-07T10:46:44.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-05T13:40:46.000Z (7 months ago)
- Last Synced: 2024-10-29T16:13:29.857Z (2 months ago)
- Topics: calendar, pro, professional, typescript, vite, vue, vuejs
- Language: Vue
- Homepage:
- Size: 254 KB
- Stars: 81
- Watchers: 5
- Forks: 14
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Pro Calendar
Another one Best Professional Calendar ever. looking for [Angular version](https://github.com/lbgm/ng-pro-calendar) ?
> Based on `vite` for `Vue 3`
- [Pro Calendar](#pro-calendar)
- [Install](#install)
- [Screenshot with Native Datepicker](#screenshot-with-native-datepicker)
- [Screenshot with VCalendar Datepicker](#screenshot-with-vcalendar-datepicker)
- [Props \& Types](#props--types)
- [Type `Configs`](#type-configs)
- [Use](#use)
- [Events](#events)
- [Slots](#slots)
- [Custom HTML Events fired](#custom-html-events-fired)
## Install
```sh
npm i vue-pro-calendar
```
## Screenshot with Native Datepicker
## Screenshot with VCalendar Datepicker
## Props & Types
> Import and inspect types `T_View`, `Configs`, `Appointment`, `T_LANG` from 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_CONFIGS` from vue-pro-calendar
### Type `Configs`
> When you set `nativeDatepicker` to `false` or `undefined`, VCalendar DatePicker will be used.
> When you set a property with type `T_Action` to `undefined`, the action is disabled.
## Use
`main.ts`
```js
import { ProCalendar } from "vue-pro-calendar";
//...
app.use(ProCalendar);
```
`App.vue`
```html
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",
},
//...
]);
```
## 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` and `end` are iso string date.
## Slots
Draw your own calendar using scoped slots
```html
```
## 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:
```html
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 });
});
});
});
```
> On default `#sideEvent template`, when user clicks on event, `calendar.request.view` is fired.