antd中日历的考勤情况显示（通过不同颜色的点进行标记）

效果图

代码的展示

<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>