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 () {

@natedoggit Just wanted to say nice job on this library. I’m using it with:

Vue 3.2.20,
Vue Router 4.0.11, and
Vuex 4.0.2

and it’s working great. I haven’t taken on any of the custom attributes yet (because I plan to bring those in with bindings later). Vue 3 support seems very solid.


Hi @natedoggit
This really helpful for me, I have installed in my system and it’s working fine for me.
Thanks for this cool plugin.