效果图
代码的展示
<template>
<a-calendar :fullscreen="false" @panelChange="onPanelChange" @select="onSelect">
<ul slot="dateCellRender" slot-scope="value" class="events">
<li v-for="item in getListData(value)" :key="item.content">
<a-badge :status="item.type" :number-style="{float:'right',marginTop:'-50px',marginRight:'-13px'}" />
</li>
</ul>
</a-calendar>
</template>
<script>
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn')
export default {
props:['renyuanId'],
data() {
return {
beDate: [
{
status:'打卡',
date: "2023-09-05",
listData: [{ type: "error" }],
},
{
status:'缺勤',
date: "2023-09-18",
listData: [{ type: "success"}],
},
{
status:'打卡',
date: "2023-09-22",
listData: [{ type: "success"}],
},
{
status:'缺勤',
date: "2023-09-26",
listData: [{ type: "error"}],
},
]
}
},
mounted(){
this.getYcqts(this.renyuanId)
},
methods: {
getListData(value) {
let listData
//遍历数组
this.beDate.forEach(e => {
//让数组的date与遍历到日历的那天的日期值相匹配
if (e.date === value.format("YYYY-MM-DD")) {
listData = e.listData;
}
});
return listData || [];
},
onPanelChange(){},
onSelect(){},
getYcqts(value){
console.log(value,'考勤表传进来的用户id');
this.$axios
.get("后端给的接口?id="+value)
.then(function (res) {
console.log(res, "考勤表");
});
},
},
};
</script>
<style scoped>
.restCls{
border: 1px solid red;
}
.events {
list-style: none;
margin: 0;
padding: 0;
}
.events .ant-badge-status {
overflow: hidden;
white-space: nowrap;
width: 100%;
text-overflow: ellipsis;
font-size: 12px;
}
.notes-month {
text-align: center;
font-size: 28px;
}
.notes-month section {
font-size: 28px;
}
</style>
调用接口,push样式
<template>
<div>
<div class="legend">
<div class="legend_item">
<div class="green"></div>
<div>正常</div>
</div>
<div class="legend_item">
<div class="red"></div>
<div>缺勤</div>
</div>
<div class="legend_item">
<div class="yellow"></div>
<div>加班</div>
</div>
</div>
<a-calendar :fullscreen="false" @panelChange="onPanelChange" @select="onSelect">
<ul slot="dateCellRender" slot-scope="value" class="events">
<li v-for="item in getListData(value)" :key="item.id">
<a-badge :status="item.type" :number-style="{float:'right',marginTop:'-50px',marginRight:'-13px'}" />
</li>
</ul>
</a-calendar>
</div>
</template>
<script>
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn')
export default {
props:['renyuanId'],
data() {
return {
beDate:[],
}
},
mounted(){
this.getYcqts(this.renyuanId)
},
methods: {
getListData(value) {
let listData
//遍历数组
this.beDate.forEach(e => {
e.listData=[]
var cardNumObj={}
if(e.kqzt==1){
cardNumObj={
type:'success'
}
e.listData.push(cardNumObj)
}else if(e.kqzt==2){
cardNumObj={
type:'error'
}
e.listData.push(cardNumObj)
}else{
cardNumObj={
type:'warning'
}
e.listData.push(cardNumObj)
}
//让数组的date与遍历到日历的那天的日期值相匹配
// console.log(e.clock_in_date.slice(0,10),'日期的截取');
if (e.clock_in_date.slice(0,10) === value.format("YYYY-MM-DD")){
listData = e.listData;
}
// console.log(e.type,'这是什么');
});
return listData || [];
},
onPanelChange(){},
onSelect(){},
getYcqts(value){
var that=this
console.log(value,'考勤表传进来的用户id');
that.$axios
.get("接口?id="+value)
.then(function (res) {
console.log(res, "考勤表");
that.beDate=res.data.result
});
},
},
};
</script>
<style scoped>
>>>.ant-fullcalendar table, .ant-fullcalendar th, .ant-fullcalendar td{
color: #fff;
}
>>>.ant-fullcalendar-last-month-cell .ant-fullcalendar-value, .ant-fullcalendar-next-month-btn-day .ant-fullcalendar-value{
color: #277469!important;
}
>>>.ant-fullcalendar-value{
color: #0dc8ae!important;
}
>>>.ant-radio-button-wrapper{
background: #363949;
border: 1px solid #01b595;
color: #fff;
height: 3.37vh;
font-size: 0.5vw
}
.events {
list-style: none;
margin: 0;
padding: 0;
}
.events .ant-badge-status {
overflow: hidden;
white-space: nowrap;
width: 100%;
text-overflow: ellipsis;
font-size: 12px;
}
.notes-month {
text-align: center;
font-size: 28px;
}
.notes-month section {
font-size: 28px;
}
>>>.ant-fullcalendar{
border: 1px solid #d9d9d9!important;
}
>>>.ant-fullcalendar-header{
border: 1px solid #d9d9d9!important;
text-align: center!important;
padding: 10px 0 !important;
}
>>>.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled){
border: 1px solid #01b595!important;
}
>>>.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover{
color: #fff!important;
}
>>>.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before{
background-color: #01b595!important;
}
>>>.ant-fullcalendar-selected-day .ant-fullcalendar-value, .ant-fullcalendar-month-panel-selected-cell .ant-fullcalendar-value{
background-color: #01b595 !important;
color: #fff!important;
}
>>>.ant-fullcalendar-today .ant-fullcalendar-value, .ant-fullcalendar-month-panel-current-cell .ant-fullcalendar-value{
box-shadow: 0 0 0 1px #01b595 inset;
color: #fff!important;
}
>>>.ant-fullcalendar-value:active{
background-color: #01b595;
color:#fff !important;
}
>>>.ant-fullcalendar-month-panel-selected-cell .ant-fullcalendar-value{
background-color: #01b595;
color: #fff !important;
}
>>>.ant-fullcalendar-month-panel-current-cell .ant-fullcalendar-value{
box-shadow: 0 0 0 1px #01b595 inset !important;
color: #fff !important;
}
.legend{
width: 100%;
height: 5vh;
padding-top: 3%;
margin-top: 8%;
margin-bottom: 5%;
/* background-color: #74807d; */
background-color: rgba(116, 128, 125,0.6);
display: flex;
justify-content: space-evenly !important;
}
.legend_item{
display: flex;
color: #fff;
}
.green{
width: 10px;
height: 10px;
margin: 5px 10px;
border-radius: 50%;
border: 1px solid #52c41a;
background-color: #52c41a;
}
.red{
width: 10px;
height: 10px;
margin: 5px 10px;
border-radius: 50%;
border: 1px solid #f5222d;
background-color: #f5222d;
}
.yellow{
width: 10px;
height: 10px;
margin: 5px 10px;
border-radius: 50%;
border: 1px solid #faad14;
background-color: #faad14;
}
</style>