需求 讲解
最近公司需要做个日历形式用来查看用户登录活跃度,我使用的是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"]});},
