elementui 日历组件el-calendar使用总结

功能：

1.日历可以周视图、月视图切换；

2.点击月视图中日期可以切换到对应周视图；

3.点击周视图查看当日对应数据；

4.周、月视图状态下，点击前后按钮，分别切换对应上下的周、月；

5.点击回到今天，立即切回到周、月视图下对应的当日；

引用dayjs处理日期，结合el-calendar完美实现。

要注意的是，日历显示周的话，传的日期范围要按照计算所在星期，比如我们的需求是周日为每周起始日，那么就要给周日的日期和周六日期为起始日，月视图我不想再去计算日期范围了，就直接用了:value，注意用的不是v-model而是value，因为value是单向的，v-model是双向数据绑定了。

<template> <div class="childContainer">   <CompBar name="XX日历" iconName="rili.png" titleName="回到今天" @handleBarClick="nowCalendar">   <div class="kalendar">      <div class="kalendar-header">         <span class="current-monuth">             <i class="el-icon-caret-left" @click="showPrev"></i>             <i class="el-icon-caret-right" @click="showNext"></i>         </span>         <el-radio-group v-model="monthYear" size="mini">             <el-radio-button label="周"></el-radio-button>             <el-radio-button label="月"></el-radio-button>         </el-radio-group>     </div>     <CalendarMonth v-if="monthYear==='月'" :calendarValue="monthDate" :selectDay="dayDate" :dateList="dateList" @getPlanList="getplanList"></CalendarMonth>     <CalendarWeek v-else :rangeArr="dateRange" :selectDay="dayDate" :dateList="dateList"          @getPlanList="getplanList"></CalendarWeek>   </div>   <tabs :class="monthYear==='月'?'monthTabs':'weekTabs'" v-model="activePlan" v-loading="isLoading">     <el-tab-pane name="tabApplyEndPlan"> //此处是个列表 </el-tab-pane>     <el-tab-pane name="tabEndPlan"></el-tab-pane>   </tabs> </template> // 此处省略组件、接口引入 import dayjs from 'dayjs'; var weekplugin = require('dayjs/plugin/weekday'); dayjs.extend(weekplugin)  // 此处省略,直接放核心代码 data(){    return{     activePlan:'tabApplyEndPlan',     monthYear:'周', // 周、月视图切换，默认显示周     monthDate:'', // 传后端参数 YYYY-MM，查视图上需要显示点的日期     dayDate:'', // 传后端参数 YYYY-MM-DD，查视图下面对应的当日数据列表     dateRange:[], // 周日历，传入周日历视图日期范围     dateList:[], // 存放月数据，视图中需要显示点的日期    } },  watch:{ // 比较简单，直接省略代码了，记录下逻辑 // 监听 monthDate、dayDate 值的改变，调用对应接口 },  methods:{ showPrev() {         // 上个月         if (this.monthYear === '月') {           this.monthDate = dayjs(this.monthDate).add(-1, 'month').format('YYYY-MM');           // 需要判断当前选中日期是否属于当前月份           let _dayDate = dayjs(this.dayDate).format('YYYY-MM');           if (_dayDate === this.monthDate) {             // 计算本周第一天             let day1 = dayjs(this.dayDate).startOf('week').format('YYYY-MM-DD');             // 计算本周最后一天             let day2 = dayjs(this.dayDate).endOf('week').format('YYYY-MM-DD');             this.dateRange = [day1, day2];           } else {             let day1 = dayjs(this.monthDate).startOf('month').startOf('week').format('YYYY-MM-DD');             let day2 = dayjs(this.monthDate).startOf('month').endOf('week').format('YYYY-MM-DD');             this.dateRange = [day1, day2]           }         }         // 上星期         if (this.monthYear === '周') {           // 获取当前周视图           let day1 = dayjs(this.dateRange[0]).add(-1, 'week').startOf('week').format('YYYY-MM-DD');           let day2 = dayjs(this.dateRange[1]).add(-1, 'week').endOf('week').format('YYYY-MM-DD');           this.monthDate = dayjs(this.dateRange[0]).add(-1, 'week').startOf('week').format('YYYY-MM');           this.dateRange = [day1, day2]         }       },  showNext() {         // 下个月         if (this.monthYear === '月') {           this.monthDate = dayjs(this.monthDate).add(1, 'month').format('YYYY-MM');           // 需要判断当前选中日期是否属于当前月份           let _dayDate = dayjs(this.dayDate).format('YYYY-MM');           if (_dayDate === this.monthDate) {             // 计算本周第一天             let day1 = dayjs(this.dayDate).startOf('week').format('YYYY-MM-DD');             // 计算本周最后一天             let day2 = dayjs(this.dayDate).endOf('week').format('YYYY-MM-DD');             this.dateRange = [day1, day2];           } else {             let day1 = dayjs(this.monthDate).endOf('month').startOf('week').format('YYYY-MM-DD');             let day2 = dayjs(this.monthDate).endOf('month').endOf('week').format('YYYY-MM-DD');             this.dateRange = [day1, day2]           }         }         // 下星期         if (this.monthYear === '周') {           // 获取当前周视图           let day1 = dayjs(this.dateRange[0]).add(1, 'week').startOf('week').format('YYYY-MM-DD');           let day2 = dayjs(this.dateRange[1]).add(1, 'week').endOf('week').format('YYYY-MM-DD');           this.monthDate = dayjs(this.dateRange[0]).add(1, 'week').startOf('week').format('YYYY-MM');           this.dateRange = [day1, day2]         }       }, // 返回今日      nowCalendar() {       this.monthDate = dayjs(new Date()).format('YYYY-MM');       this.dayDate = dayjs(new Date()).format('YYYY-MM-DD');       let day1 = dayjs(new Date()).startOf('week').format('YYYY-MM-DD');       let day2 = dayjs(new Date()).endOf('week').format('YYYY-MM-DD');       this.dateRange = [day1, day2];       this.activePlan = 'tabApplyEndPlan'     }, // 周、月视图日期被点击处理方法     getPlanList(date) {       // console.log(this.monthYear)       // console.log(date)       this.dayDate = date.day;       // 点击上、下月/周日期，不涉及视图的切换       if (this.monthYear === '月') {         if (date.type === 'next-month') {           this.showNext()         }         if (date.type === 'prev-month') {           this.showPrev()         }       }       if (this.monthYear === '周') {         let _month = dayjs(date.day).format('YYYY-MM');         if (date.type === 'next-month') {           if (_month !== this.monthDate) {             this.monthDate = dayjs(date.day).format('YYYY-MM');           }         }         if (date.type === 'prev-month') {           if (_month !== this.monthDate) {             this.monthDate = dayjs(date.day).format('YYYY-MM');           }         }       }       if (date.type === 'current-month') {         this.monthYear = '周';         // 计算本周第一天         let day1 = dayjs(this.dayDate).startOf('week').format('YYYY-MM-DD');         // 计算本周最后一天         let day2 = dayjs(this.dayDate).endOf('week').format('YYYY-MM-DD');         // 计算点击日期所在周第一天所属月         this.monthDate = dayjs(day1).startOf('week').format('YYYY-MM');         this.dateRange = [day1, day2];       }     },  }   

自定义日历样式（没有用日历原先的头，全部自己重写的，还不错）： 

::v-deep .kalendar {     &-header {       text-align: center;       margin: 10px 16px 0 16px;        .current-monuth {         font-size: 16px;         letter-spacing: 0;         font-weight: 500;         margin-left: 15%;         color: #262626;         font-family: PingFangSC-Medium;          i {           cursor: pointer;         }       }        .el-radio-group {         float: right;       }        .el-radio-button__orig-radio:checked + .el-radio-button__inner {         background: #ffffff;         box-shadow: -1px 0 0 0 transparent;         border: 1px solid rgba(199, 0, 11, 1);         font-family: PingFangSC-Medium;         font-size: 12px;         color: #c7000b;         letter-spacing: -0.04px;         font-weight: 500;       }        .el-radio-button__inner:hover {         color: #c7000b;       }     }      .calender-dot-box {       width: 100%;       bottom: -8px;       position: absolute;        span {         width: 6px;         height: 6px;         margin-right: 3px;         border-radius: 50%;         display: inline-block;          &:last-of-type {           margin-right: 0;         }       }        .endPlan {         background-color: #d61212;       }        .applyEndPlan {         background-color: #ffd100;       }     }      .el-calendar {       &__body {         padding: 10px 16px;       }        .is-today {         .el-calendar-day {           .calender-date {             width: 34px;             height: 34px;             margin: 0 auto;             color: #ff534f;             border-radius: 10px;             background: #fff;             box-shadow: none;           }         }       }        &__header {         display: none;       }        .current {         .el-calendar-day {           color: #262626;         }       }        .prev,       .next {         color: #bfbfbf;       }        &-day {         padding: 0;         font-weight: 700;         font-size: 16px;         letter-spacing: 0;         text-align: center;         position: relative;         transition: color 0.3s;         font-family: DINAlternate-Bold;       }        &-table {         th {           font-family: PingFangSC-Regular;           font-size: 16px;           color: #262626;           letter-spacing: 0;           text-align: center;           line-height: 34px;           font-weight: 400;           padding: 0;            &:last-of-type,           &:first-of-type {             color: #ff564e;           }         }          td {           border: none;            &.is-selected {             background-color: transparent;           }         }          .el-calendar-day {           height: 34px;           line-height: 34px;            &:hover {             background-color: transparent;           }            .calendar-isSelected {             width: 34px;             height: 34px;             margin: 0 auto;             color: #fff;             border-radius: 10px;             background: #ff534f;             box-shadow: 0px 0px 2px 0px rgba(238, 88, 64, 1);           }         }       }     }

再看看子组件里面，先看月的：

<template>   <!-- 月日历 -->   <el-calendar :value="calendarValue" :first-day-of-week="7" value-format="YYY-MM">     <template slot="dateCell" slot-scope="{ date, data }">       <div v-if="selectedDay === data.day" class="calendar-isSelected" @click="handleDate($event, date, data)">         {{ date.getDate() }}       </div>       <div v-else class="calender-date" @click="handleDate($event, date, data)">         {{ date.getDate() }}       </div>       <div class="calender-dot-box" @click="handleDate($event, date, data, 'dot')">         <template v-for="(item) in dateLists">           <span class="applyEndPlan" v-if="item.date === data.day && item.applyEndPlanNum > 0"></span>           <span class="endPlan" v-if="item.date === data.day && item.endPlanNum > 0"></span>         </template>       </div>     </template>   </el-calendar> </template> <script> export default {   components: {},   name: "CalendarMonth",   props: {     selectedDay: {       type: String,       default: "",     },     calendarValue: {       type: String,       default: new Date(),     },     dateList: {       type: Array,       default: () => {         return [];       },     },   },   watch: {     dateList: {       handler(list) {         this.dateLists = list;       },       immediate: true,     },   },   data() {     return { monthDate: this.calendarValue, dateLists: [] };   },   created() { },   methods: {     handleDate(e, date, data) {       this.$emit("getPlanList", data);     },   }, }; </script> <style lang="scss" scoped></style>

周日历组件：

<template>   <!-- 周日历 -->   <el-calendar :range="rangeArr" :first-day-of-week="7" value-format="YYY-MM">     <template slot="dateCell" slot-scope="{date,data}">       <div v-if="selectedDay === data.day" class="calendar-isSelected" @click="handleDate($event, date, data)">         {{ date.getDate() }}</div>        <div v-else class="calender-date" @click="handleDate($event, date, data)">{{ date.getDate() }}</div>       <div class="calender-dot-box" @click="handleDate($event, date, data)">         <template v-for="(item) in dateList">           <span class="applyEndPlan" v-if="item.date === data.day && item.applyEndPlanNum > 0"></span>           <span class="endPlan" v-if="item.date === data.day && item.endPlanNum > 0"></span>         </template>       </div>     </template>   </el-calendar> </template> <script> export default {   components: {}, name: 'CalendarWeek', props: {     selectedDay: {       type: String, default: '',     }, rangeArr: {       type: Array,       default: () => {         return [];       }     }, dateList: {       type: Array, default: () => {         return [];       }     }   }, data() {     return {     }   }, created() {   }, methods: {     handleDate(e, date, data) {       // console.log(e,date,data)       this.$emit('getPlanList', data)     },   } }</script> <style lang="scss" scoped></style>

其实应该把日历组件二次封装一下，就不用单独再去写周、月日历子组件了，有空了可以试试。

不过不得不再吐槽一句，elementui的日历组件，给提供的API真心的少，功能很简单。。。

最终效果图：

月视图效果图：

月视图下，有时候会出现整整一行的灰色日期，看起来不是很美观，那么就需要操作dom，通过js判断，操作dom来处理。大概思路就是，先通过 document.querySelectorAll('.el-calendar-table__row') 获取到所有.el-calendar-table__row的元素节点lists，然后循环遍历这些节点，若其子元素class中含有.current，那么就说明是带有当月的日期，则不改变样式，若不含，则说明这整行都是前\后月的日期，那么就可以把该.el-calendar-table__row的css里面加上属性display:none。

周视图效果图：