v2calendar-picker

$ npm install v2calendar-picker

// 基本使用
// main.js 引入并use();
import CalendarPicker from 'v2calendar-picker'
import 'v2calendar-picker/v2calendar-picker.css'
Vue.use(CalendarPicker)

// app.vue
<template>
    <div class="calendar">
        <CalendarPicker
            v-model="dates"
            :format="format"
            :disabledDates="disabledDates"
            @change="valueChange">
        </CalendarPicker>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dates: "2021/10/03",
            format: "YYYY-MM-DD",
            disabledDates: ["2020/12/04", "2020/12/07"]
        };
    },
    methods: {
        valueChange(value, date) {
            console.log(value, date, "valueChange");
        }
    }
};
</script>

// 样式相关
// APP.vue
<template>
  <div id="app">
    <div class="calendar">
      <CalendarPicker
        activeClassName="item-active"
        dateClassName="date-item"
        :interpositonClass="interpositonClass"
      ></CalendarPicker>
    </div>
  </div>
</template>

<script>
export default { 
  methods: {
    /** 当日期为2023/8/25时显示 item-active2样式 */
    interpositonClass(val) {
      if (`${val.year}/${val.month}/${val.date}` === "2023/8/25") {
        /** 只有返回类名才有效果 */
        return "item-active2";
      }
    },
  },
}
</script>

// 可以直接覆盖组件内部样式
<style lang="less">
.calendar {
  width: 500px;
  .date-item {
    border-radius: 12px;
  }
  .item-active {
    color: #fff;
    background-color: rgb(111, 111, 111);
  }
  .item-active2 {
    background-color: rgb(140, 96, 96);
  }
}
</style>