Vuelendar. A new Codest’s project based on Vue.js

Vuelendar is a small data picker calendar written in Vue.js. For a quite long time, we were using vue wrapper for pikaday in our project. Unfortunately, it was hard to customize, and it’s API didn’t allow us to implement quite a lot requirements.

Source code ouf vuelendar you can find in our github repository.

Short introduction

We needed to do a lot of hacks. At one point, we decided that it would be easier to create own Vue.js based calendar from scratch than customize the existing one.

Vuelendar allows users to select either range of dates:

Vulendar

or select a single date:

Codest's vuelendar

How to use it?

If you want to start using vuelendar it’s enough to install it:

npm install vuelendar@1.0.0

import styles in your .vue file:

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

register appropriate components in your VueJS project:

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
    }
  }
  // ...
}

and use in a template:

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

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

Let's start a project

Estimate project