Qalendar is a Vue 3 event calendar & date picker library written in Typescript.
How to use it:
1. Import and register the Qalendar.
import {Qalendar} from "qalendar";
export default { components: { Qalendar, }, // ... }
2. Add the Qalendar to the template and define your events as follows:
<template> <Qalendar :events="events" /> </template>
export default { components: { Qalendar, }, data() { return { events: [ { title: "Event 1", with: "Chandler Bing", time: { start: "2022-07-16 12:05", end: "2022-07-16 13:35" }, topic: '', location: '', // 'blue', 'yellow', 'green' or 'red' color: "yellow", colorScheme: '', isEditable: true, id: "123456", description: "Event Description 1", disableDnD: ['month', 'week', 'day'], disableResize: ['week', 'day'] }, // ... ], } }, }
3. Available component props.
config: { type: Object as PropType<configInterface>, default: () => ({}), }, events: { type: Array as PropType<eventInterface[]>, default: () => [], }, selectedDate: { type: Date, default: new Date(), }, isLoading: { type: Boolean, default: false, },
4. Config options.
data() { return { config: { week: { // Takes the value 'sunday' or 'monday' // However, if startsOn is set to 'sunday' and nDays to 5, the week displayed will be Monday - Friday startsOn: 'monday', // Takes the values 5 or 7. nDays: 7, }, // Takes any valid locale that the browser understands. However, not all locales have been thorougly tested in Qalendar // If no locale is set, the preferred browser locale will be used locale: 'de-DE', style: { // When adding a custom font, please also set the fallback(s) yourself fontFamily: 'Nunito', sans-serif, }, // if not set, the mode defaults to 'week'. The three available options are 'month', 'week' and 'day' // Please note, that smaller devices can only utilize the day mode defaultMode: 'day', // The silent flag can be added, to disable the development warnings. This will also bring a slight performance boost isSilent: true, } } }
5. Events.
- @event-was-clicked
- @event-was-dragged
- @event-was-resized
- @updated-period
- @updated-mode
- @edit-event
- @delete-event
6. It also comes with a date picker component that allows the user to select a date from the calendar. Basic usage:
import { DatePicker } from "qalendar";
export default { components: { DatePicker }, data() { return { // Disables the user from selecting dates other than in June 2022 disableDates: { before: new Date(2022, 5, 1), after: new Date(2022, 5, 31), }, }; }, methods: { handleUpdate(payload) { const { year, month, date } = payload; }, }, };
<template> <DatePicker locale="en-US" firstDayOfWeek="sunday" :disable-dates="disableDates" :default-date="new Date(2022, 5, 1)" @updated="handleUpdate" /> </template>
Preview:
Changelog:
v1.6.0 (08/13/2022)
- customizable events
v1.5.2 (08/07/2022)
- bugfixes
v1.5.1 (08/05/2022)
- bugfixes
v1.5.0 (07/30/2022)
- feat: clickable day intervals
Download Details:
Author: tomosterlund
Live Demo: https://tomosterlund.github.io/qalendar/#a-word-on-language
Download Link: https://github.com/tomosterlund/qalendar/archive/refs/heads/master.zip
Official Website: https://github.com/tomosterlund/qalendar
Install & Download:
# NPM
$ npm i qalendar