V-Calendar - a calendar/date-picker plugin with support for highlights & indicators

Hey folks. I’ve been working on V-Calendar, a lightweight plugin for displaying simple, annotated calendars in Vue. Some features include…

  • Displaying attributes such as highlighted regions, dot indicators and bar indicators for an array of dates or date regions
  • Animated transitions for month navigation
  • Scoped slot support for header regions
  • Extensive styling support (documentation for this in work)
  • Date picker support built in with animated selections
  • Tap & swipe support for navigation and day selection

It is still in the very early stages, but I have personally already found use for it in some of my hobby apps. I just published the docs site today, but I don’t feel it is ready just yet for trying to share with others publicly (except this forum, of course). I hope some of you will find it useful and offer some advice.


I’ll be honest this is my first piece of open source software to release to the public, so I’m sure there are a lot of things I need to work on (like test support coverage, methods for contributing, etc). I want to do right by the OSS community, but I just wanted to get it out into the open first. If you’d like to try it, please limit to just using NPM for now…still working out CDN installation support.


This looks cool - I will definitely be keeping on eye on this.

Hi, I’ve installed vcalendar with CDN and it’s working. I can set new attributes to the calendar and highlight new dates.

How can I get the date when I click on a day? I tried using v-model and @click but nothing happens and I cannot find a doc showing how it works.

<div id="app" class="calendar-container">
	<v-calendar @click="getDate()" :attributes='attributes'></v-calendar>

new Vue({
    el: '#app',
    data() {
        return {
            event: '',
            attributes: [
                    key: 'today',
                    highlight: true,
                    dates: new Date()
                    key: 'event',
                    highlight: true,
                    dates: new Date('09/09/2020')
    created() {
        // console.log(this.attributes);

        let event = new Date('09/09/2020');
        // console.log(event);

                key: 'tour',
                highlight: true,
                dates: new Date('09/12/2020')

        this.attributes.forEach(attr => {
            // console.log(attr.dates);

    methods: {
        getDate: function () {