Vue中的日历组件 Calendar 实现考勤打卡记录

日历组件 Calendar 可以自定义在页面添加内容。

实现效果图
在这里插入图片描述

1.由于Calendar没有右上角月份切换的API事件，可以给组件源码添加自定义添加一个事件
在这里插入图片描述

2.也可以通过自带的input事件来获取日历

3.vue页面完整代码
注释：this.$m(this.beginTime).format(‘YYYY-MM-DD HH:mm’)，是分装的标准时间转化年月日，使用者可通过多种方法自定义处理。

<template><div><!-- 日历组件 --><el-calendar:events="tableData":date-format="'yyyy-MM-dd'":time-format="true":time-区间步长="30"@date-change="getDateChange"style="height:95%;overflow:scroll"><templateslot="dateCell"slot-scope="{date, data}"><p :class="dateFormatter(date)">{{ data.day.split('-').slice(1).join('-') }}</p><div v-if="result[$m(date).format('YYYY-MM-DD')] " class="chockIn"><p v-if="result[$m(date).format('YYYY-MM-DD')].length >= 2">上班：{{ result[$m(date).format('YYYY-MM-DD')][result[$m(date).format('YYYY-MM-DD')].length-1].checkInTime }}</p> <p v-if="result[$m(date).format('YYYY-MM-DD')].length >= 2" style="margin-top:5px;">下班：{{ result[$m(date).format('YYYY-MM-DD')][0].checkInTime }}</p> <el-popoverplacement="bottom"width="540"max-width="540"trigger="clickv-if="result[$m(date).format('YYYY-MM-DD')].length > 2"><el-table :data="result[$m(date).format('YYYY-MM-DD')]"><el-table-column align="center" type="index" width="60" label="序号"></el-table-column><el-table-column prop="clockTime" align="left" label="打卡时间" width="180"><template slot-scope="scope">{{ $m(scope.row.clockTime).format('YYYY-MM-DD HH:mm') }}</template></el-table-column><el-table-column width="300" property="site" label="地址" show-overflow-tooltip></el-table-column></el-table><p class="navMore"  slot="reference">展示更多</p> </el-popover></div><p class="absenceFromDuty" v-if="($m(new Date()).format('YYYY-MM-DD') >= $m(date).format('YYYY-MM-DD'))"><span v-if="!result[$m(date).format('YYYY-MM-DD')] || result[$m(date).format('YYYY-MM-DD')].length < 2">{{dateFormatterText(date)}}</span></p> </template> </el-calendar></div>
</template><script>export default {data() {return {beginTime: '',endTime: '',newDate:'',nowDate:'',result:{},value: new Date(), // 当前日期}},created(){// 获取当前月第一天this.beginTime = this.$m().firstDay();this.beginTime = this.$m(this.beginTime).format('YYYY-MM-DD HH:mm')// 获取当前月最后一天this.endTime = this.$m().lastDay();this.endTime = this.$m(this.begiendTimenTime).format('YYYY-MM-DD 23:59')},methods: {// 检查日期是否是周末dateFormatterText(date) {const dayOfWeek = date.getDay();if (dayOfWeek === 0 || dayOfWeek === 6) { // 0 是星期日，6 是星期六return ''; }return '缺勤';},// 获取日历数据getDateChange(val){let date = val.split("-");date = date[0] + '-' + date[1];//打卡的年月if(date){// 开始时间let firstDay = this.$m(date).firstDay();this.beginTime = this.$m(firstDay).format('YYYY-MM-DD HH:mm')// 结束时间let lastDay = this.$m(date).lastDay();this.endTime = this.$m(lastDay).format('YYYY-MM-DD 23:59')// 获取每个月发月份下的打卡记录this.getClockLogList();}},// 获取打卡记录getClockLogList(){// ...调用接口获取每个月的考勤打卡数据，赋值给 this.tableData// this.tableData = val;},}
}
</script>
<style lang="scss" scoped>.chockIn{margin-top:10px;}.absenceFromDuty{color: #c06817;margin-top:10px;}.navMore{margin-top:3px;color: #3370ff;}.weekend-highlight {color: #eb3333;}
</style>