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,
// Scroll to a certain hour on mounting a week. Takes any value from 0 to 23.
// This option is not compatible with the 'dayBoundaries'-option, and will simply be ignored if custom day boundaries are set.
scrollToHour: 5,
},
month: {
// Hide leading and trailing dates in the month view (defaults to true when not set)
showTrailingAndLeadingDates: false,
},
// 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,
// Display a line indicating the current time
showCurrentTime: 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:
v3.6.0 (11/30/2023)
- exposes gotoPeriod method to top level
v3.5.1 (11/14/2023)
- bugfixes
v3.5.0 (07/13/2023)
- add config option to disable flyout closing when clicking outside
v3.4.0 (07/04/2023)
- add japanese language
v3.3.0 (06/29/2023)
- add new event datetime was clicked
v3.2.0 (06/23/2023)
- dark mode
v3.1.0 (06/16/2023)
- month: add highlight to current day
v3.0.0 (06/12/2023)
- new view for month mode on mobile
- flexible day boundaries. A day in the calendar can now span across two actual days, starting for example at 6AM and ending at 3AM the next day.
- month mode on small screens has a new layout, and monthEvent slot now only works on larger screens
v2.5.0 (04/06/2023)
- add Spanish translations
v2.4.0 (04/02/2023)
- custom day slot
v2.3.1 (03/26/2023)
- re-init scrollbar every time a drag & drop action is canceled
v2.3.0 (03/23/2023)
- Add Language Support for Ababic
v2.2.0 (03/18/2023)
- add Russian language
v2.1.3 (03/11/2023)
- correct line-height for hours in day timeline
v2.1.2 (03/09/2023)
- hide leading and trailing days in month on mobile
v2.1.1 (03/08/2023)
- prevent layout shifts in header
v2.1.0 (03/08/2023)
- allow user to optionally hide leading and trailing days in month mode
v2.0.0 (03/01/2023)
- month mode custom events
- named slot “event” has been replaced by “weekDayEvent”
v1.18.1 (02/28/2023)
- bugfix
v1.17.0 (01/31/2023)
- add dutch/nl lang
v1.16.0 (01/26/2023)
- bugfixes
v1.14.1 (12/04/2022)
- bugfixes
v1.14.0 (11/27/2022)
- enable month mode in small calendar
v1.13.0 (11/26/2022)
- add french language support
v1.12.1 (11/20/2022)
- prevent qalendar from resetting to default mode when being resized
v1.12.0 (11/16/2022)
- configurable day boundaries
v1.11.0 (11/16/2022)
- add day-was-clicked event for all modes
v1.10.1 (11/15/2022)
- Bugfix: missing type check on config.week.scrollToHour
v1.10.0 (11/05/2022)
- add line for current time
v1.9.1 (10/29/2022)
- improve event flyout position on small screens
v1.9.0 (10/21/2022)
- Added pt-BR language
v1.8.0 (10/08/2022)
- add scrollToHour option
v1.7.0 (09/17/2022)
- more precise dragging
v1.6.1 (08/23/2022)
- add perfect scrollbar to prevent layout shifts
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