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

#1

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.

https://vcalendar.netlify.com

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.

5 Likes
#2

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

#3

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>
</div>

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);

        this.attributes.push(
            {
                key: 'tour',
                highlight: true,
                dates: new Date('09/12/2020')
            }
        )

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


        });
    },
    methods: {
        getDate: function () {
            console.log(this.attributes);
        }
    },
});