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

涛声依旧在  金牌会员 | 2024-7-16 22:16:21 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 796|帖子 796|积分 2388

功能：
1.日历可以周视图、月视图切换；
2.点击月视图中日期可以切换到对应周视图；
3.点击周视图检察当日对应数据；
4.周、月视图状态下，点击前后按钮，分别切换对应上下的周、月；
5.点击回到今天，立即切回到周、月视图下对应的当日；
引用dayjs处理日期，联合el-calendar完美实现。
要留意的是，日历体现周的话，传的日期范围要按照盘算地点星期，好比我们的需求是周日为每周起始日，那么就要给周日的日期和周六日期为起始日，月视图我不想再去盘算日期范围了，就直接用了:value，留意用的不是v-model而是value，因为value是单向的，v-model是双向数据绑定了。

  1. <template>
  2. <div class="childContainer">
  3.   <CompBar name="XX日历" iconName="rili.png" titleName="回到今天" @handleBarClick="nowCalendar">
  4.   <div class="kalendar">
  5.      <div class="kalendar-header">
  6.         <span class="current-monuth">
  7.             <i class="el-icon-caret-left" @click="showPrev"></i>
  8.             <i class="el-icon-caret-right" @click="showNext"></i>
  9.         </span>
  10.         <el-radio-group v-model="monthYear" size="mini">
  11.             <el-radio-button label="周"></el-radio-button>
  12.             <el-radio-button label="月"></el-radio-button>
  13.         </el-radio-group>
  14.     </div>
  15.     <CalendarMonth v-if="monthYear==='月'" :calendarValue="monthDate" :selectDay="dayDate" :dateList="dateList" @getPlanList="getplanList"></CalendarMonth>
  16.     <CalendarWeek v-else :rangeArr="dateRange" :selectDay="dayDate" :dateList="dateList"         
  17. @getPlanList="getplanList"></CalendarWeek>
  18.   </div>
  19.   <tabs :class="monthYear==='月'?'monthTabs':'weekTabs'" v-model="activePlan" v-loading="isLoading">
  20.     <el-tab-pane name="tabApplyEndPlan">
  21. //此处是个列表
  22. </el-tab-pane>
  23.     <el-tab-pane name="tabEndPlan"></el-tab-pane>
  24.   </tabs>
  25. </template>
  26. // 此处省略组件、接口引入
  27. import dayjs from 'dayjs';
  28. var weekplugin = require('dayjs/plugin/weekday');
  29. dayjs.extend(weekplugin)
  31. // 此处省略,直接放核心代码
  32. data(){
  33.    return{
  34.     activePlan:'tabApplyEndPlan',
  35.     monthYear:'周', // 周、月视图切换，默认显示周
  36.     monthDate:'', // 传后端参数 YYYY-MM，查视图上需要显示点的日期
  37.     dayDate:'', // 传后端参数 YYYY-MM-DD，查视图下面对应的当日数据列表
  38.     dateRange:[], // 周日历，传入周日历视图日期范围
  39.     dateList:[], // 存放月数据，视图中需要显示点的日期
  40.    }
  41. },
  43. watch:{
  44. // 比较简单，直接省略代码了，记录下逻辑
  45. // 监听 monthDate、dayDate 值的改变，调用对应接口
  46. },
  48. methods:{
  49. showPrev() {
  50.         // 上个月
  51.         if (this.monthYear === '月') {
  52.           this.monthDate = dayjs(this.monthDate).add(-1, 'month').format('YYYY-MM');
  53.           // 需要判断当前选中日期是否属于当前月份
  54.           let _dayDate = dayjs(this.dayDate).format('YYYY-MM');
  55.           if (_dayDate === this.monthDate) {
  56.             // 计算本周第一天
  57.             let day1 = dayjs(this.dayDate).startOf('week').format('YYYY-MM-DD');
  58.             // 计算本周最后一天
  59.             let day2 = dayjs(this.dayDate).endOf('week').format('YYYY-MM-DD');
  60.             this.dateRange = [day1, day2];
  61.           } else {
  62.             let day1 = dayjs(this.monthDate).startOf('month').startOf('week').format('YYYY-MM-DD');
  63.             let day2 = dayjs(this.monthDate).startOf('month').endOf('week').format('YYYY-MM-DD');
  64.             this.dateRange = [day1, day2]
  65.           }
  66.         }
  67.         // 上星期
  68.         if (this.monthYear === '周') {
  69.           // 获取当前周视图
  70.           let day1 = dayjs(this.dateRange[0]).add(-1, 'week').startOf('week').format('YYYY-MM-DD');
  71.           let day2 = dayjs(this.dateRange[1]).add(-1, 'week').endOf('week').format('YYYY-MM-DD');
  72.           this.monthDate = dayjs(this.dateRange[0]).add(-1, 'week').startOf('week').format('YYYY-MM');
  73.           this.dateRange = [day1, day2]
  74.         }
  75.       },
  76. showNext() {
  77.         // 下个月
  78.         if (this.monthYear === '月') {
  79.           this.monthDate = dayjs(this.monthDate).add(1, 'month').format('YYYY-MM');
  80.           // 需要判断当前选中日期是否属于当前月份
  81.           let _dayDate = dayjs(this.dayDate).format('YYYY-MM');
  82.           if (_dayDate === this.monthDate) {
  83.             // 计算本周第一天
  84.             let day1 = dayjs(this.dayDate).startOf('week').format('YYYY-MM-DD');
  85.             // 计算本周最后一天
  86.             let day2 = dayjs(this.dayDate).endOf('week').format('YYYY-MM-DD');
  87.             this.dateRange = [day1, day2];
  88.           } else {
  89.             let day1 = dayjs(this.monthDate).endOf('month').startOf('week').format('YYYY-MM-DD');
  90.             let day2 = dayjs(this.monthDate).endOf('month').endOf('week').format('YYYY-MM-DD');
  91.             this.dateRange = [day1, day2]
  92.           }
  93.         }
  94.         // 下星期
  95.         if (this.monthYear === '周') {
  96.           // 获取当前周视图
  97.           let day1 = dayjs(this.dateRange[0]).add(1, 'week').startOf('week').format('YYYY-MM-DD');
  98.           let day2 = dayjs(this.dateRange[1]).add(1, 'week').endOf('week').format('YYYY-MM-DD');
  99.           this.monthDate = dayjs(this.dateRange[0]).add(1, 'week').startOf('week').format('YYYY-MM');
  100.           this.dateRange = [day1, day2]
  101.         }
  102.       },
  103. // 返回今日
  104.      nowCalendar() {
  105.       this.monthDate = dayjs(new Date()).format('YYYY-MM');
  106.       this.dayDate = dayjs(new Date()).format('YYYY-MM-DD');
  107.       let day1 = dayjs(new Date()).startOf('week').format('YYYY-MM-DD');
  108.       let day2 = dayjs(new Date()).endOf('week').format('YYYY-MM-DD');
  109.       this.dateRange = [day1, day2];
  110.       this.activePlan = 'tabApplyEndPlan'
  111.     },
  112. // 周、月视图日期被点击处理方法
  113.     getPlanList(date) {
  114.       // console.log(this.monthYear)
  115.       // console.log(date)
  116.       this.dayDate = date.day;
  117.       // 点击上、下月/周日期，不涉及视图的切换
  118.       if (this.monthYear === '月') {
  119.         if (date.type === 'next-month') {
  120.           this.showNext()
  121.         }
  122.         if (date.type === 'prev-month') {
  123.           this.showPrev()
  124.         }
  125.       }
  126.       if (this.monthYear === '周') {
  127.         let _month = dayjs(date.day).format('YYYY-MM');
  128.         if (date.type === 'next-month') {
  129.           if (_month !== this.monthDate) {
  130.             this.monthDate = dayjs(date.day).format('YYYY-MM');
  131.           }
  132.         }
  133.         if (date.type === 'prev-month') {
  134.           if (_month !== this.monthDate) {
  135.             this.monthDate = dayjs(date.day).format('YYYY-MM');
  136.           }
  137.         }
  138.       }
  139.       if (date.type === 'current-month') {
  140.         this.monthYear = '周';
  141.         // 计算本周第一天
  142.         let day1 = dayjs(this.dayDate).startOf('week').format('YYYY-MM-DD');
  143.         // 计算本周最后一天
  144.         let day2 = dayjs(this.dayDate).endOf('week').format('YYYY-MM-DD');
  145.         // 计算点击日期所在周第一天所属月
  146.         this.monthDate = dayjs(day1).startOf('week').format('YYYY-MM');
  147.         this.dateRange = [day1, day2];
  148.       }
  149.     },
  151. }
复制代码
自定义日历样式（没有用日历原先的头，全部自己重写的，还不错）： 
  1. ::v-deep .kalendar {
  2.     &-header {
  3.       text-align: center;
  4.       margin: 10px 16px 0 16px;
  6.       .current-monuth {
  7.         font-size: 16px;
  8.         letter-spacing: 0;
  9.         font-weight: 500;
  10.         margin-left: 15%;
  11.         color: #262626;
  12.         font-family: PingFangSC-Medium;
  14.         i {
  15.           cursor: pointer;
  16.         }
  17.       }
  19.       .el-radio-group {
  20.         float: right;
  21.       }
  23.       .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  24.         background: #ffffff;
  25.         box-shadow: -1px 0 0 0 transparent;
  26.         border: 1px solid rgba(199, 0, 11, 1);
  27.         font-family: PingFangSC-Medium;
  28.         font-size: 12px;
  29.         color: #c7000b;
  30.         letter-spacing: -0.04px;
  31.         font-weight: 500;
  32.       }
  34.       .el-radio-button__inner:hover {
  35.         color: #c7000b;
  36.       }
  37.     }
  39.     .calender-dot-box {
  40.       width: 100%;
  41.       bottom: -8px;
  42.       position: absolute;
  44.       span {
  45.         width: 6px;
  46.         height: 6px;
  47.         margin-right: 3px;
  48.         border-radius: 50%;
  49.         display: inline-block;
  51.         &:last-of-type {
  52.           margin-right: 0;
  53.         }
  54.       }
  56.       .endPlan {
  57.         background-color: #d61212;
  58.       }
  60.       .applyEndPlan {
  61.         background-color: #ffd100;
  62.       }
  63.     }
  65.     .el-calendar {
  66.       &__body {
  67.         padding: 10px 16px;
  68.       }
  70.       .is-today {
  71.         .el-calendar-day {
  72.           .calender-date {
  73.             width: 34px;
  74.             height: 34px;
  75.             margin: 0 auto;
  76.             color: #ff534f;
  77.             border-radius: 10px;
  78.             background: #fff;
  79.             box-shadow: none;
  80.           }
  81.         }
  82.       }
  84.       &__header {
  85.         display: none;
  86.       }
  88.       .current {
  89.         .el-calendar-day {
  90.           color: #262626;
  91.         }
  92.       }
  94.       .prev,
  95.       .next {
  96.         color: #bfbfbf;
  97.       }
  99.       &-day {
  100.         padding: 0;
  101.         font-weight: 700;
  102.         font-size: 16px;
  103.         letter-spacing: 0;
  104.         text-align: center;
  105.         position: relative;
  106.         transition: color 0.3s;
  107.         font-family: DINAlternate-Bold;
  108.       }
  110.       &-table {
  111.         th {
  112.           font-family: PingFangSC-Regular;
  113.           font-size: 16px;
  114.           color: #262626;
  115.           letter-spacing: 0;
  116.           text-align: center;
  117.           line-height: 34px;
  118.           font-weight: 400;
  119.           padding: 0;
  121.           &:last-of-type,
  122.           &:first-of-type {
  123.             color: #ff564e;
  124.           }
  125.         }
  127.         td {
  128.           border: none;
  130.           &.is-selected {
  131.             background-color: transparent;
  132.           }
  133.         }
  135.         .el-calendar-day {
  136.           height: 34px;
  137.           line-height: 34px;
  139.           &:hover {
  140.             background-color: transparent;
  141.           }
  143.           .calendar-isSelected {
  144.             width: 34px;
  145.             height: 34px;
  146.             margin: 0 auto;
  147.             color: #fff;
  148.             border-radius: 10px;
  149.             background: #ff534f;
  150.             box-shadow: 0px 0px 2px 0px rgba(238, 88, 64, 1);
  151.           }
  152.         }
  153.       }
  154.     }
复制代码
再看看子组件里面，先看月的：
  1. <template>
  2.   <!-- 月日历 -->
  3.   <el-calendar :value="calendarValue" :first-day-of-week="7" value-format="YYY-MM">
  4.     <template slot="dateCell" slot-scope="{ date, data }">
  5.       <div v-if="selectedDay === data.day" class="calendar-isSelected" @click="handleDate($event, date, data)">
  6.         {{ date.getDate() }}
  7.       </div>
  8.       <div v-else class="calender-date" @click="handleDate($event, date, data)">
  9.         {{ date.getDate() }}
  10.       </div>
  11.       <div class="calender-dot-box" @click="handleDate($event, date, data, 'dot')">
  12.         <template v-for="(item) in dateLists">
  13.           <span class="applyEndPlan" v-if="item.date === data.day && item.applyEndPlanNum > 0"></span>
  14.           <span class="endPlan" v-if="item.date === data.day && item.endPlanNum > 0"></span>
  15.         </template>
  16.       </div>
  17.     </template>
  18.   </el-calendar>
  19. </template>
  20. <script>
  21. export default {
  22.   components: {},
  23.   name: "CalendarMonth",
  24.   props: {
  25.     selectedDay: {
  26.       type: String,
  27.       default: "",
  28.     },
  29.     calendarValue: {
  30.       type: String,
  31.       default: new Date(),
  32.     },
  33.     dateList: {
  34.       type: Array,
  35.       default: () => {
  36.         return [];
  37.       },
  38.     },
  39.   },
  40.   watch: {
  41.     dateList: {
  42.       handler(list) {
  43.         this.dateLists = list;
  44.       },
  45.       immediate: true,
  46.     },
  47.   },
  48.   data() {
  49.     return { monthDate: this.calendarValue, dateLists: [] };
  50.   },
  51.   created() { },
  52.   methods: {
  53.     handleDate(e, date, data) {
  54.       this.$emit("getPlanList", data);
  55.     },
  56.   },
  57. };
  58. </script>
  59. <style lang="scss" scoped></style>
复制代码
周日历组件：
  1. <template>
  2.   <!-- 周日历 -->
  3.   <el-calendar :range="rangeArr" :first-day-of-week="7" value-format="YYY-MM">
  4.     <template slot="dateCell" slot-scope="{date,data}">
  5.       <div v-if="selectedDay === data.day" class="calendar-isSelected" @click="handleDate($event, date, data)">
  6.         {{ date.getDate() }}</div>
  7.       <div v-else class="calender-date" @click="handleDate($event, date, data)">{{ date.getDate() }}</div>
  8.       <div class="calender-dot-box" @click="handleDate($event, date, data)">
  9.         <template v-for="(item) in dateList">
  10.           <span class="applyEndPlan" v-if="item.date === data.day && item.applyEndPlanNum > 0"></span>
  11.           <span class="endPlan" v-if="item.date === data.day && item.endPlanNum > 0"></span>
  12.         </template>
  13.       </div>
  14.     </template>
  15.   </el-calendar>
  16. </template>
  17. <script>
  18. export default {
  19.   components: {}, name: 'CalendarWeek', props: {
  20.     selectedDay: {
  21.       type: String, default: '',
  22.     }, rangeArr: {
  23.       type: Array,
  24.       default: () => {
  25.         return [];
  26.       }
  27.     }, dateList: {
  28.       type: Array, default: () => {
  29.         return [];
  30.       }
  31.     }
  32.   }, data() {
  33.     return {
  34.     }
  35.   }, created() {
  36.   }, methods: {
  37.     handleDate(e, date, data) {
  38.       // console.log(e,date,data)
  39.       this.$emit('getPlanList', data)
  40.     },
  41.   }
  42. }</script>
  43. <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。
周视图结果图： 



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

正序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

涛声依旧在

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表