项目场景：

先上需求，如下图：

需求描述：

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

解决方案：

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-tableref="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 + DDlet 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;  }}
}

最后效果图

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

vue使用antd实现日历待办标记相关推荐

android 钉钉考勤日历,vue钉钉考勤日历 vue实现钉钉的考勤日历
想了解vue实现钉钉的考勤日历的相关内容吗,张张张立宏在本文为您仔细讲解vue钉钉考勤日历的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue钉钉考勤日历,vue钉钉考勤,vue考勤日历 ...
日历待办软件推荐桌面日历待办便签
电脑桌面有多功能日历软件,对于我们日常的工作和学习来说是非常方便的.有些桌面日历软件不但可以查看公农历日期以及放假调休安排,还可以添加待办事项,方便用户一眼就可以看到今日安排,以及当月待办事项在日历上 ...
vue之排班日历的实现
这里写自定义目录标题 vue之排班日历的实现 index.vue 排班日历组件 calendar.vue calendar.js vue之排班日历的实现查询日期和数据,展示对于的排班日历,蓝色为 ...
待办事项下拉html代码,HTML5 + jQuery 实现日历待办事项demo
< head > < meta http-equiv = "Content-Type" content = "text/html; charset=ut ...
Vue+TypeScript+Antd+Stylus+Flexible+阿里普惠体
一.vue create yoye-front 创建项目二.引入 normalize.css 安装 npm install normalize.css -S "main.ts" ...
Vue中使用Fullcalendar日历开发日程安排
效果图: 官方文档地址:Vue Component - Docs | FullCalendar 1.安装与FullCalendar相关的依赖项 npm install --save @fullcale ...
vue中使用FullCalendar日历组件
官方地址:https://fullcalendar.io/ 官方vue文档(比较简洁而且是英文的):https://fullcalendar.io/docs/vue 中文文档(jquery版本)地址: ...
vue中使用FullCalendar日历插件
文章目录前言一.FullCalendar兼容二.使用步骤 1.引入库 2.载入使用总结前言因为要实现一个类似任务日历的功能,于是翻看了vue创造的日历组件发现不能符合要求的,所以又找了几个 ...
vue —— 带农历的日历功能
闲来无事做一些简单功能,一边练习VUE的使用,一边锻炼逻辑思维能力.之前有个项目需要自己写一个月份选择器,由此想起来做一个简单的日历,做起来有一些自己感兴趣的东西,也为了记录一下,发个帖首先,我做的 ...

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

项目场景：

需求描述：

解决方案：

html代码

js

css

vue使用antd实现日历待办标记相关推荐

最新文章

热门文章