Meet Vuelendar: a Datepicker Calendar Written in VueJS

As the customization was getting more challenging and time-consuming, we’ve decided to look for another solution. What’s more, the APIs did not allow us to implement lots of requirements that were quite crucial for the quality of the end product. This is why the Vuelendar was made.

You can find the source code of the Vuelendar in our GitHub repository.

What is it exactly?

As you might already guessed at the beginning of this article, a Vuelendar is a calendar component written in VueJs. It allows you to pick a range of dates or a single one. What is more, you can also easily replace inactive days! Also , it allows you to add customized CSS bits which can ultimately change the ‘look and feel’ experience.

The creation process

Previously, we were using jQquery to implement the calendar feature in one of our projects and we’ve stumbled upon a problem – it was hard to customize. This is when we’ve made a decision to make our own component. In the first phase, we mainly used it in our own projects but as the time went by, we came to the conclusion that it might be a handy solution for other programmers – this is when we shared it on The Codest’s GitHub account in the form of a code library.

Installation

npm install vuelendar@1.0.0

Usage

Import styles in your .vue file:

<style src="vuelendar/scss/vuelendar.scss" lang="scss"></style>

Register components:

import VRangeSelector from 'vuelendar/components/vl-range-selector';
import VDaySelector from 'vuelendar/components/vl-day-selector';

export default {
  components: {
    VRangeSelector,
    VDaySelector
  },
  data () {
    return {
      range: {},
      date: null
    }
  }
  // ...
}

Use in template:

<v-range-selector
  :start-date.sync="range.start"
  :end-date.sync="range.end"
/>

<v-day-selector
  v-model="date"
/>

Disabling dates

Using an array:

<v-day-selector
  v-model="date"
  disabled-dates="['2019-04-21', '2019-04-25']
/>

Will disable 21st April 2019 and 25th April 2019

Using an object to describe a range of dates:

<v-day-selector
  v-model="date"
  disabled-dates="{
    from: '2019-04-21',
    to: '2019-04-23'
  }"
/>
Will disable all dates from 21st April 2019 and 25th April 2019

Specifying only 'from' attribute will disable all dates past that date.

<v-day-selector
  v-model="date"
  disabled-dates="{
    from: '2019-04-21',
  }"
/>
Will disable all dates from 21st April 2019

Specifying only 'to' attribute will disable all dates before that date.

<v-day-selector
  v-model="date"
  disabled-dates="{
    to: '2019-04-21',
  }"
/>
Will disable all dates before 21st April 2019

Application

Our Vuelendar can be used in all projects based on VueJS. It is a simple but efficient component that will not only save your time as a programmer but also enrich your project with a smoothly working calendar. Nowadays, there are many projects which might need this a solution, so here we are!

The update

As the new update of VueJS was launched, the new requirements appeared. This is why we’ve decided to adjust our calendar component to the newest version of VueJS. The libraries needed to be improved so that our small but handy gem would run smoothly and effectively.

Wrapping Up

If you are in the middle of a project based on VueJS and search for a cool feature of a calendar, this one is definitely for you! We all know how much time creating those components can take. Our Vuelandar will help you spice up your application and save some time and nerves!

Read more:

Why you should (probably) use Typescript

How not to kill a project with bad coding practices?

Data fetching strategies in NextJS