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.
To install the Vue component globally, use:
npm install --save simple-vue-calendar
This will add the
simple-vue-calendar component to your project.
You can also add the component locally using something like:
You can import the 8 responsive color schemes by using the following:
The default CSS references the 'Oxygen' font on Google Fonts. You can use this too, by adding the following to your projects HTML head:
In its most simplest form, you can create a calendar component using the following:
This will render a calendar for October 2019. You can swap out the date, or use somthing like:
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:
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.
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, blue. By default, the
turquoise color will be selected.
You can demo the different color schemes at https://conobe.co.uk/projects/simple-vue-calendar
This component is built to be used with Vue 2.
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 :)