日历组件 Calendar 可以自定义在页面添加内容。
实现效果图
文章来源:https://www.toymoban.com/news/detail-815589.html
1.由于Calendar没有右上角月份切换的API事件,可以给组件源码添加自定义添加一个事件
2.也可以通过自带的input事件来获取日历
3.vue页面完整代码
注释:this.$m(this.beginTime).format(‘YYYY-MM-DD HH:mm’),是分装的标准时间转化年月日,使用者可通过多种方法自定义处理。文章来源地址https://www.toymoban.com/news/detail-815589.html
<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>
到了这里,关于Vue中的日历组件 Calendar 实现 考勤打卡记录的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!