Ant Design of Vue 中 日历 Calendar 自定义填充

 需求 讲解

最近公司需要做个日历形式 用来查看用户登录活跃度,我使用的是Ant里面的 Calendar

HTML

用 dateCellRender  函数来自定义需要渲染的数据。

showActive控制是否显示内容

<a-calendar :fullscreen="false">
    <template slot="dateCellRender" slot-scope="value" class="event">
         <div class="active" v-if="showActive(value)"> <span class="day">{{showActive(value)}}</span><i class="iconfont icon-qiandao1"></i></div>
   </template>
</a-calendar>

JS

loginArr 存的是后台请求显示活跃度日期的参数

 showActive(value) {
      const timeDate = moment(value).format('YYYY-MM-DD')
      return this.loginArr.includes(timeDate) ? value.date() : ''
 },

css

/deep/ .ant-fullcalendar-date{
  position: relative;
}
/deep/ .ant-fullcalendar-content{
  top: 0;
}
.active{
  top: 7px;
  position: absolute;
  left: 18px;
  z-index: 10;
  width: 55px;
  height: 55px;
  background: #EFF3FF;
  border-radius: 8px;
  .iconfont{
     position: absolute;
     font-size: 14px;
     bottom: 3px;
     left: 21px;
     color: #2D67FF;
     font-weight: 600;
  }
  .day{
    font-weight: 600;
    position: absolute;
    color: #2D67FF;
    top: 9px;
    left: 20px;
  }
}
/deep/ .ant-select-selection-selected-value{
  font-size: 14px;
  color: #333333;
  font-weight: 600;
  padding-left: 5px;
}
/deep/ .ant-select-selection {
  border: 1px solid #DCDEE0;
  border-radius: 4px;
  height: 36px;
  padding-right: 15px;
}
/deep/  .ant-select-sm .ant-select-selection__rendered {
  line-height: 36px;
}

最后需要更改日期排序 在mounted里面修改moment，引入moment.js

mounted() {
    moment.updateLocale('en', {
      weekdaysMin : ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
    });
  },