vue使用antd实现日历待办标记

项目场景：

先上需求，如下图：

需求描述：

根据月份查询当前月哪一天有待办数据，并展示在日历面板中（红点标记）

解决方案：

1，页面初始化时，先根据当前日期(yy-mm)查询当前月哪些天有待补录数据
2，根据日期查询当月有待补录数据的day
3，日历面板发生改变时，重新查询数据
4，日历面板上选择某天时，根据这一天查询待补录数据

html代码

<!-- 日历 -->
<a-calendar
	:fullscreen="false"
	@panelChange="onPanelChange"
	@select="selectDate"
>
	<div slot="dateCellRender slot-scope="value">
		<div v-if="getData(value)">
			<a-badge :status="getData(value)"></a-badge>
		</div>
	</div>
</a-calendar>

<!-- 待补录数据表 -->
<a-table
	ref="table"
	:rowKey="(record, index) => { return index }"
	:columns="itemColumns"
	:dataSource="itemData"
/>

js

<script>
	import { getAction } from '@/api/dashboard'
	export dafault {
		data() {
			return {
				beDate: []             // 根据当月查出来的有待办数据的day   ['10', '15', '18', ...]
			}
		}
		methods: {
			/**
			* 页面初始化时，默认查询当前月的待补录数据
			*/
			let httpUrl = '/indebt/crAgenda/query/agenda/date' 
				getAction(httpUrl).then(res => {
					this.itemData = res.result
			})

			/**
			*  日历面板发生改变时，重新查询数据
			*/
			onPanelChange(val, mode){
				let year = val._d.getFullYear() + '-'
				let month = (val._d.getMonth() + 1 >= 10 ? (val._d.getMonth() + 1) : '0' + (value._d.getMonth() + 1)
				this.loadAgendaData(year+month)
			},
			
			/**
			*  日历面板上选择某天时，根据这一天查询待补录数据
			*/
			selectDate(val){
				let timeStamp = val._d.getTime()
				let date = new Date(timeStamp)
				let YY = date.getFullYear() +  '-'
				let MM = (date.getMonth() + 1 <  10  ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + ''
				let DD = (date.getDate() < 10 ? '0' + (date.getDate) : date.getDate())
				let queryDate = YY + MM + DD
				let httpUrl = `/indebt/crAgenda/query/agenda/date?date=${queryDate}` 
				getAction(httpUrl).then(res => {
					this.itemData = res.result
				})
			},
	
			/**
			*  根据日期查询当月有待补录数据的day  
			*/
			loadAgendaData(date) {
				let httpUrl = '/indebt/crAgenda/queryBymgrCus'
				const data = {
					ym: date
				}
				getAction(httpUrl, data).then(res => {
					this.beDate = res.result.map(item => {
						return item.split('-')[2]
					})
				})
			}
			
			getData(val){
				let currentDay = val.date()
				for(let i=0; i <this.beDate.length; i ++){
					if(currentDay == this.beDate[i]){
						return ‘error’
					}
				}
			}
		}
	}
</script>

css

.ant-fullcalendar-table{
	tbody{
		.ant-fullcalendar-last-month-cell{ // 隐藏上个月数据
			.ant-fullcalendar-date{
				display: none;
			}
		}
		.ant-fullcalendar-next-month-btn-day{ // 隐藏下个月的数据
			display: none;  
		}
	}
}

最后效果图

最后：愿你我梦里没有代码！！！