vLite Calendar
A simple and lightweight, yet flexible calendar component for Vue 2.x, with:
- no styles dependency or inline styles
- using browser locale
- date-fns/esm (only calculation methods)
The intention of this component is to allow you to style your own calendar theme to suit your website design. See Styles Guide for detail.
Demo
See Demo Page for more example.
Get Started
Installation
As usual, install the calendar component NPM package.
npm install vlite-calendar --save
Next, include the calendar component in your own component.
import Calendar from 'vlite-calendar';
export default {
// ...
components: {
Calendar,
},
// ...
}
Then, you can use
tag in your Vue template.
<calendar>calendar>
Check out Props Guide for component available props.
CDN Usage
Coming soon
Props Guide
| Prop | Type | Default | Description |
|---|---|---|---|
| class-prefix | String | vl-calendar | Calendar CSS class prefix. |
| date | Date | new Date() | Calendar selected date. |
| process-date | Function | Post-processing the final content of rendered date. See vdate Object Guide for more detail. |
|
| views | Array | ['days', 'months', 'years'] | Enable different view mode on the calendar. *First item will used as default view. |
| week-start | Number | 0 | The first day of the week (0-Sunday) |
| prepend | Vue Slot | Ability to inject additional content into the start of the calendar | |
| append | Vue Slot | Ability to inject additional content into the end of the calendar |
Example code.
<calendar
:date="pickedDate"
:views="['days']"
>calendar>
Example usage of Vue Slot.
<calendar :date="pickedDate">
<div slot="prepend">
This will appear before the calendar
div>
<div slot="append">
This will appear after the calendar
div>
calendar>
Events Guide
| Event | Params | Description |
|---|---|---|
| change-view | (newView) | View mode changed. |
| select-day | ({ day, vdate }) | A day has been selected. |
| select-month | ({ day, vdate }) | A month has been selected. The day indicate the first day of the selected month. |
| select-year | ({ day, vdate }) | A year has been selected. The day indicate the first day of the selected year. |
Example usage.
<calendar
@select-day="onSelect"
>calendar>
export default {
...
methods: {
onSelect({ day, vdate }) {
console.log(day);
}
}
}
vdate Object Guide
vdate object is used by component internally for handling what to render on each calendar days, months, and years. However, you can overwrite it through process-date prop.
| Prop | Type | Description |
|---|---|---|
| day | Date | Current date in JS Date object |
| key | Timestamp | Current date in timestamp |
| type | String | Current content type - day, month, or year |
| display | String | Display content for current date |
| classes | String | Injected CSS classes |
| isToday | Boolean | Is current date today? |
| isCurrent | Boolean | Is current date same as calendar selected date? |
| isInvalid | Boolean | Is current date disabled? |
| isOut | Boolean | Is current date out of calendar month? |
Example usage.
<calendar
:process-date="onProcessDate"
>calendar>
export default {
...
methods: {
onProcessDate(vdate) {
// perform some checking
// console.log(vdate.day)
// vdate.isInvalid = true;
// ...
// remember to return back the vdate object
return vdate;
}
}
}
Styles Guide
This component is intentionally for custom calendar theme styling. Hence all CSS classes used within the component are auto-prefixed with vl-calendar (can be overwrite through component class-prefix prop).
| CSS class | Description |
|---|---|
.{prefix} |
Calendar root |
.{prefix}-row |
Row wrap of calendar |
.{prefix}-caption |
Calendar view label |
.{prefix}-prev |
Calendar '<' button |
.{prefix}-next |
Calendar '>' button |
.{prefix}-week |
Week content |
.{prefix}-day |
Day content |
.{prefix}-month |
Month content |
.{prefix}-year |
Year content |
.{prefix}--out |
State indicator, content is outside of viewing month |
.{prefix}--today |
State indicator, content is today |
.{prefix}--current |
State indicator, content is same as selected date |
.{prefix}--invalid |
State indicator, content is disabled |
You can scope targeted these CSS classes on your component.
<style scoped>
/deep/ .vl-calendar{
...
}
/deep/ .vl-calendar-day{
...
}
style>
However, you are free to use the built-in styling if you want.
import 'vlite-calendar/dist/vlite-calendar-style.min.css';
Change Log
Change logs can be found at CHANGELOG.md
55 May 2, 2022
242 Dec 18, 2022
6 Jun 15, 2022
762 Jan 3, 2023
15 Feb 28, 2022
76 Oct 5, 2022
35 Oct 5, 2022
5 Aug 25, 2022
633 Nov 11, 2022
434 Jan 3, 2023
70 Aug 20, 2022
47 Aug 16, 2022
485 Dec 18, 2022
425 Dec 27, 2022
37 Aug 10, 2022
47 Nov 24, 2022
3.7k Dec 31, 2022
0 Feb 11, 2021
75 Nov 11, 2022