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"
		>
			<template
				slot="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-popover
						placement="bottom"
						width="540"
						max-width="540"
						trigger="click
						v-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>