1. 安装scss

npm i -D sass-loader@8.0.2
npm i node-sass@4.14.1

2. 安装日历组件

npm i vue-calendar-component --save

3. 安装提示组件

npm install --save vue-component-toast

4. 注册组件

main.js

import toast from 'vue-component-toast'
import 'vue-component-toast/dist/css/vc-toast.min.css'// Vue.use(toast, [<global-option>])
Vue.use(toast)

5. 页面

<template><div class="content"><Calendarref="Calendar":markDateMore="arr":markDate="arr2"v-on:isToday="clickToday"agoDayHide="1530115221"v-on:choseDay="clickDay"v-on:changeMonth="changeDate"></Calendar><br><div class="choseMonth-style" style="background-color: #398ade;" @click="ChoseMonthChock ">点击跳到2022-01-21</div></div>
</template><script>
import Calendar from "vue-calendar-component";export default {data() {return {arr2: [],arr: [{date: "2022/01/1",className: "mark1"},{date: "2022/01/13",className: "mark2"}]};},components: {Calendar},methods: {clickDay(data) {console.log("选中了", data); //选中某天this.$toast("选中了" + data);},clickToday(data) {console.log("跳到了本月今天", data); //跳到了本月},changeDate(data) {this.$toast("切换到的月份为" + data);console.log("左右点击切换月份", data); //左右点击切换月份},ChoseMonthChock() {this.$refs.Calendar.ChoseMonth("2018-12-13"); //跳到12月12日选中12月12日}},created() {function format(date, index) {date = new Date(date);return `${date.getFullYear()}-${date.getMonth() + 1}-${index}`;}// setTimeout(() => {//   this.arr = [//     {//       date: format(new Date(), 3),//       className: "mark1"//     },//     {//       date: format(new Date(), 12),//       className: "mark2"//     }//   ];//   this.arr.push({//     date: format(new Date(), 15),//     className: "mark1"//   });// }, 300);}
};
</script><style scoped>
/* 重写css部分 start */
/deep/ .wh_content_item {color: black;
}/deep/ .wh_top_changge li {color: black;
}/deep/ .wh_jiantou1 {border-top: 2px solid #030303;border-left: 2px solid #030303;
}/deep/ .wh_jiantou2 {border-top: 2px solid #030303;border-right: 2px solid #030303;
}/deep/ .wh_jiantou1 {background-color: white;
}/deep/ .wh_content_all {background-color: #ffffff
}/deep/ .wh_content_item .wh_isToday {background-color: #2b85e4
}/deep/ .wh_content_item .wh_chose_day {background-color: #9acafc;
}/* 重写css部分 end */h3 {text-align: center;width: 90%;margin: auto;
}.choseMonth-style {margin: auto;width: 220px;height: 44px;line-height: 44px;/*background: #0fc37c;*/color: #fff;font-size: 17px;text-align: center;margin-top: 20px;
}.wh_container >>> .mark1 {background-color: orange;
}.wh_container >>> .mark2 {background-color: blue;
}.wh_content_item > .wh_isMark {background: orange;
}
</style>

6. 效果图