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

Zdroj: kód 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:

or select a single date:

How to use it?

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

npm install [email protected]

import styles in your .vue file:

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

register appropriate components in your VueJS projekt:

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

You can also check out the repository with demo.

Přečtěte si také:

• Codest’s weekly report of best tech articles. WebAssembly and software testing (8)
• Co je Ruby on Jets a jak pomocí něj vytvořit aplikaci?
• Jak efektivně řídit vzdálené vývojáře? Průvodce pro CTO