Simple Vue Calendar
A simple, lightweight, event-driven calendar component for Vue 2. This plugin will allow you to generate calendars with 8 responsive color schemes to choose from or add your own stylesheet.
Based on my jQuery calendar plugin found here: https://github.com/benhall14/jquery-calendar.
GitHub/BitBucket
Installation
To install the Vue component globally, use:
npm install --save simple-vue-calendar
This will add the simple-vue-calendar component to your project.
import SimpleVueCalendar from 'simple-vue-calendar'
Vue.use(SimpleVueCalendar)
You can also add the component locally using something like:
// NewComponent.vue
<template>
...
<simple-vue-calendar></simple-vue-calendar>
...
</template>
<script>
...
import { SimpleVueCalendar } from 'simple-vue-calendar'
export default {
components: {
SimpleVueCalendar
},
}
...
</script>
You can also view and download this plugin at GitHub: https://github.com/benhall14/simple-vue-calendar.
CSS
You can import the 8 responsive color schemes by using the following:
import 'simple-vue-calendar/dist/simple-vue-calendar.css'
The default CSS references the 'Oxygen' font on Google Fonts. You can use this too, by adding the following to your projects HTML head:
<link href="https://fonts.googleapis.com/css?family=Oxygen:400,700" rel="stylesheet">
Basic Usage
In its most simplest form, you can create a calendar component using the following:
<simple-vue-calendar date="2019/10/31"></simple-vue-calendar>
This will render a calendar for October 2019. You can swap out the date, or use somthing like:
<simple-vue-calendar :date="date"></simple-vue-calendar>
<script>
...
data() {
return {
date: new Date(),
}
}
...
</script>
This way, you can update your date data at any time, and the calendar will react to the change and re-render the calendar for the new date.
Calendar Events
You can mark or mask off dates on the calendar by simply passing an array of event data points, in the following format:
<simple-vue-calendar :date="date" :events="events"></simple-vue-calendar>
<script>
...
data() {
return {
date: new Date(),
events: [
{
start: '2019/10/31',
end: '2019/10/31',
summary: "Halloween",
mask: true
},
{
start: '2019/11/05',
end: '2019/11/20',
summary: "Example Event #2",
mask: true
},
{
start: '2019/10/02',
end: '2019/10/07',
summary: "Example Event #3",
mask: true
}
]
}
}
...
</script>
Emitted Events
When the date of the calendar changes, such as clicking previous/next months, the calendarchange event is emitted for you to listen for and attach any custom functionality.
<simple-vue-calendar :date="date" @dateChange="handleDateChange"></simple-vue-calendar>
...
<script>
...
data() {
date: '2019/10/31',
},
methods: {
handleDateChange(event) {
// add your custom logic here
},
}
...
</script>
Options
I've added a few customizable options too, which you can override by passing the following props:
table_class
Any additional classes that you would like to add to the main calendar table.
show_links
Either "true" or "false". Passing "false" will remove the links for the previous/next months and fix the calendar in the current month.
months
An array of month names. Default:
[
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
]
days
An array of day names. Default:
['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
daysMin
An array of short day names. Default:
['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']
daysLetter
An array of day letters. Default:
['S', 'M', 'T', 'W', 'T', 'F', 'S']
color
If you're using the included CSS stylesheet, you can use any of the following to change the color scheme of the calendar: purple, pink, orange, yellow, green, grey or blue. By default, the turquoise color will be selected.
Demo
An example of with the show_links option turned on (default) and a sample event for the 7th-14th.
Requirements
This component is built to be used with Vue 2.
License
Copyright (c) Benjamin Hall, ben@conobe.co.uk https://conobe.co.uk
Licensed under the MIT license
Donate?
If you find this project helpful or useful in any way, please consider getting me a cup of coffee - It's really appreciated :)
More Projects?