Vue Material Style Monthly Calendar View Plugin Library

Vue material year calendar is an easy-to-use monthly calendar component with a multi-dimensional design for Vuejs applications.

simple javascript date picker, material calendar scheduler, vue year calendar, vue material calendar, material calendar view, daterangepicker material, year calendar in javascript

🔥 12 Months on a page
🌈 Material style
🕒 depend on dayjs
🍀 by Vue.js

How to make use of it:

Install and download:

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

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 specify the activation 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. Component props available.

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
}

Material Style Monthly Calendar, vue material year calendar Plugin/Github, simple javascript calendar, javascript calendar open source, javascript calendar widget, best javascript calendar