vue 平铺式日历--在原基础上增加小圆点功能

原插件效果：

需求效果：

由于原插件无小圆点功能，所以增加了一个小圆点数组属性，另外注意，由于是vue，修改插件会比较麻烦，所以本人把插件单独作为组件放到component里面引入，而非直接下载使用。

使用的插件：

vue-material-year-calendar(可自行在GitHub搜步骤）以下步骤，按需求更改过，红色框为自己添加内容）

使用步骤：

1.安装插件：

npm install vue-material-year-calendar --save
2.导入插件：

import YearCalendar from 'vue-material-year-calendar'
3.代码实现：

index.vue:（引入插件的页面）

图中代码：

.your_customized_wrapper_class{
  background-color: #0aa;color: white
}
.calendar .day{
  color: black;
}
.my-blue{
  color: blue!important;
}
.my-red{
  color: red!important;
}
.calendar .day.my-blue::after{
  content: '';top: unset!important;right: 11px!important;bottom: -5px!important;
  width: 5px!important;height: 5px!important;background: blue!important;
  transform: translateX(50%);
}
.calendar .day.my-red::after{
  content: '';top: unset!important;right: 11px!important;bottom: -5px!important;
  width: 5px!important;height: 5px!important;background: red!important;
  transform: translateX(50%);
}

MonthCalendar.vue :(插件的页面）

图中代码：

this.obviousDates.forEach(date => {
  let oDate = date
  let dayjsObj = dayjs(oDate.date)
  if (dayjsObj.year() !== this.year) return
  let obviousDate = dayjsObj.date()
  let row = Math.floor(obviousDate / 7)
  let obviousArrayKey = (obviousDate % 7) - 1 + firstDay + 7 * row
  this.showDays[obviousArrayKey].active = true // to array index
  this.showDays[obviousArrayKey].className = (this.showDays[obviousArrayKey].className || '') + ' ' + oDate.className
})

Yearcanlendaar.vue:(插件的页面）

图中代码：

obviousDates: {
  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
      }
      // 以下程式碼參考「How to validate date with format mm/dd/yyyy in JavaScript?」in Stackoverflow// 由於 「^\d{4}\-\d{1,2}\-\d{1,2}$」會被ESLint 判為錯誤，所以暫時關閉 EsLint 對下一行的驗證 by丁丁// eslint-disable-next-line no-useless-escape
      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
  }
},

图中代码：

month1 () {
  const month = {}
  this.obviousDates.forEach(date => {
    let oDate

    if (typeof date === 'string') {
      oDate = {
        date: date,
        className: this.activeClass
      }
    } else {
      // 若 activeDate 裡的物件少了 className 屬性，就自動填入空字串。否則會變成undefined
      oDate = {
        date: date.date,
        className: date.className || ''
      }
    }
    if (dayjs(oDate.date).year() !== parseInt(this.value)) return // 讓2020年1月的資料，不會放到 2019年的1月資料裡
    let m = (dayjs(oDate.date).month() + 1).toString()
    if (!month[m]) month[m] = []
    month[m].push(oDate)
  })
  return month
},