Material Style Monthly Calendar For Vue

An easy-to-use, Material Design style monthly calendar component for Vue.js applications.

How to use it:

1. Import the calendar component.

import YearCalendar from ‘vue-material-year-calendar’

2. Add the <YearCalendar /> component to the template.

<template>
  <YearCalendar
    v-model="year"
    :activeDates.sync="activeDates"
    @toggleDate="toggleDate"
    prefixClass="your_customized_wrapper_class"
    :activeClass="activeClass"
  ></YearCalendar>
</template>

3. Register the component and set activate dates as follows:

export default {
  components: { YearCalendar },
  data () {
    return {
      year: 2021,
      activeDates: [
        { date: '2021-02-13' },
        { date: '2021-02-14', className: 'red' },
        { date: '2021-02-15', className: 'blue' },
        { date: '2021-02-16', className: 'your_customized_classname' }
      ],
      activeClass: '',
    }
  },
  methods: {
    toggleDate (dateInfo) {
      console.log(dateInfo) 
    }
  }
}

4. Available component props.

showYearSelector: {
  type: Boolean,
  default: () => true
},
activeDates: {
  type: Array,
  default: () => [],
  validator: (dateArray) => {
    let isGood = true
    let curDate = null
    dateArray.forEach(date => {
      if (typeof date === 'string') {
        curDate = date
      } else if (typeof date === 'object' && date.hasOwnProperty('date')) {
        curDate = date.date
      }
      if (!/^\d{4}\-\d{1,2}\-\d{1,2}$/.test(curDate)) {
        isGood = false
      }
      // Parse the date parts to integers
      var parts = curDate.split('-')
      var day = parseInt(parts[2], 10)
      var month = parseInt(parts[1], 10)
      var year = parseInt(parts[0], 10)
      if (year < 1000 || year > 3000 || month === 0 || month > 12) isGood = false
      let monthLength = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ]
      if (year % 400 === 0 || (year % 100 !== 0 && year % 4 === 0)) monthLength[1] = 29
      if (!(day > 0 && day <= monthLength[month - 1])) isGood = false
    })
    return isGood
  }
},
// v-model="year"
value: {
  type: [String, Number],
  default: dayjs().year()
},
lang: {
  type: String,
  default: 'en'
},
activeClass: {
  type: String,
  default: () => ''
},
prefixClass: {
  type: String,
  default: () => 'calendar--active'
},
hideWeekend: {
  type: Boolean,
  default: false
},
hideSunday: {
  type: Boolean,
  default: false
}

Preview:

Changelog:

04/27/2021

• bugfix: year props type issue

Download Details:

Author: nono1526

Live Demo: https://nono1526.github.io/vue-material-year-calendar/

Download Link: https://github.com/nono1526/vue-material-year-calendar/archive/refs/heads/master.zip

Official Website: https://github.com/nono1526/vue-material-year-calendar

Install & Download:

# NPM
$ npm i vue-material-year-calendar