实现的基本样式如下：

使用方法

1、安装插件

npm install vue-material-year-calendar --save

2、导入插件

import YearCalendar from 'vue-material-year-calendar'

3、代码实现

<template><YearCalendarv-model="year":activeDates.sync="activeDates"@toggleDate="toggleDate"prefixClass="your_customized_wrapper_class":activeClass="activeClass"></YearCalendar>
</template><script>
import YearCalendar from 'vue-material-year-calendar'export default {components: { YearCalendar },data () {return {year: 2019,activeDates: [{ date: '2019-02-13' },{ date: '2019-02-14', className: 'red' },{ date: '2019-02-15', className: 'blue' },{ date: '2019-02-16', className: 'your_customized_classname' }],activeClass: '',}},methods: {toggleDate (dateInfo) {console.log(dateInfo)  // { date: '2010-10-23', selected: true }}}
}
</script><style lang="stylus">
.your_customized_wrapper_classbackground-color: #0aacolor: white&.redbackground-color: redcolor: white&:afterbackground-image url('./assets/baseline-remove_circle-24px.svg')background-size 100% 100%&.bluebackground-color: #0000aacolor: white&.your_customized_classnamebackground-color: yellowcolor: black</style>

原文参考地址：https://github.com/nono1526/vue-material-year-calendar#readme