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.
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.
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">
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.
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>
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>
I've added a few customizable options too, which you can override by passing the following props:
Any additional classes that you would like to add to the main calendar table.
Either "true" or "false". Passing "false" will remove the links for the previous/next months and fix the calendar in the current month.
An array of month names. Default:
[
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
]
An array of day names. Default:
['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
An array of short day names. Default:
['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']
An array of day letters. Default:
['S', 'M', 'T', 'W', 'T', 'F', 'S']
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.
An example of with the show_links option turned on (default) and a sample event for the 7th-14th.
This component is built to be used with Vue 2
Copyright (c) Benjamin Hall, ben@conobe.co.uk - https://conobe.co.uk
Licensed under the MIT license
If you find this project helpful or useful in any way, please consider getting me a cup of coffee - It's really appreciated :)
