Material Month Calendar For Vue.js

Material Month Calendar For Vue.js

A dead simple Material Design styled month calendar built using Vue.js and VueMaterial.

Vue Month Calendar - You can now choose dates without a calendar.

monthPNG.png

Try it yourself.

click here

How to install

 npm install vue-month-calendar --save

How to use

import VueMonthCalendar from 'vue-month-calendar'

const currentDate = new Date()

new Vue({
  el: '#month-calendar',
  name: 'vue-month-calendar',
  data: function () {
    return {
      options: {
        minYear: currentDate.getFullYear() - 7,
        maxYear: currentDate.getFullYear(),
        initialDate: {},
        finalDate: {}
      }
    }
  },
  components: {
    'VueMonthCalendar': VueMonthCalendar
  }
})
In your page use
  <vue-month-calendar id='month-calendar' locale='en-US' :options="options"></vue-month-calendar>
Dual list options
  • options.locale:(optional): Application locale;
  • options.minYear:(required): Min year that will be shown in the select options.;
  • options.maxYear:(required): Min year that will be shown in the select options.;
  • options.initialDate:(required): First day of month that you selected.;
  • options.finalDate:(required): Last day of month that you selected.;

change month calendar

npm install -g nodemon

To execute your changes run the command npm run dev

Used versions

vue

version: 2.2.6

vue-material

version: ^0.7.1


License

It is available under the MIT license. License

Github Repository

Tags: #VueJs