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.

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


If you find this project helpful or useful in any way, please consider getting me a cup of coffee - It's really appreciated :)

Donate

More Projects?
Benjamin, is brilliant at what he does, he really knows what he is at. Gives real useful advice and guidance. He is fast and timely provides updates and always provides solutions and listens well. Trust me Benjamin is a breath of fresh air.

- Alexander T.

★★★★★

Ben had a great idea for my project and completed the project to our requirements very quickly. He also helped me tweak a few issues and answered my questions quickly. We'll work with Ben again!

- Gordon S.

★★★★★

I was impressed: a freelancer who could give me inputs and details on how he'd implement the solution, kept me updated in the meanwhile, understood my requirements and proposed pretty nice tweaks to make things even better. Ben, you are amazing. I will need no more time to find any other dev's, and will surely deal with you again if I need something related to these things in the future. Full stop.

- Marco F.

★★★★★

Absolutely superb, a great work ethic, outstanding knowledge and a great eye for detail. I thoroughly recommend him!

- Gary J.

★★★★★

Benjamin is a talented developer who can tackle technically challenging projects with great service and communication. Thoroughly recommended.

- Steven M.

★★★★★

Ben truly went above and beyond. He's fantastic at communication, coding, getting round problems, fixing issues, WordPress, custom plugins and much more. I will be using Ben again for other projects.

- Rachael R.

★★★★★

Ben went the extra mile and not only resolved the problem but provided a more suitable solution for the long term. Cheers!

- William R.

★★★★★

Ben is an amazing developer. He took the project and delivered it on time and within budget, whilst maintaining excellent communication. He also worked beyond what was asked to make sure the project was functioning correctly. Would highly recommend A++++!

- David B.

★★★★★

Fantastic work on our JS script. Ben worked beyond the goals of the project and overcame extra issues that were not defined in the project. He is very quick to respond and patent when waiting for our response. One of our top 5 Developers, We had to deal with many Interfaces including server firewalls/Java-scripting/JSON/PHP/PHP APIs/Remote Databases and automation.

- Kevin J.

★★★★★

Ben is just great to work with. Efficient, clearly communicating, understanding very quickly, and also giving great advice. I will continue working with Ben on any other WordPress stuff. Sorry for all those other PPH'ers :-)

- Bruno V.

★★★★★

Absolutely amazing experience. Ben is an expert in this field, I was amazed at how quickly he jumped on our platform and decoded the code, db etc. He will go over and above to find solutions for clients. Highly recommended.

- Harrus A.

★★★★★

Interested in working together to make something great? Hire CONOBE