适用于Vue.js应用程序的易于使用的Material Design风格月度日历组件。

安装和下载：

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

如何使用它：

1.导入日历组件。

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

2.将<YearCalendar />组件添加到模板。

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

3.注册组件并设置激活日期，如下所示：

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.可用的组件道具。

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
}

---

官网：https://github.com/nono1526/vue-material-year-calendar

演示：https://www.vue365.cn/code_demo.php?id=4385

GitHub下载：https://github.com/nono1526/vue-material-year-calendar/archive/refs/heads/master.zip