项目场景:

先上需求,如下图:

需求描述:

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

解决方案:

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实现日历待办标记相关推荐

  1. android 钉钉考勤日历,vue钉钉考勤日历 vue实现钉钉的考勤日历

    想了解vue实现钉钉的考勤日历的相关内容吗,张张张立宏在本文为您仔细讲解vue钉钉考勤日历的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue钉钉考勤日历,vue钉钉考勤,vue考勤日历 ...

  2. 日历待办软件推荐桌面日历待办便签

    电脑桌面有多功能日历软件,对于我们日常的工作和学习来说是非常方便的.有些桌面日历软件不但可以查看公农历日期以及放假调休安排,还可以添加待办事项,方便用户一眼就可以看到今日安排,以及当月待办事项在日历上 ...

  3. vue之排班日历的 实现

    这里写自定义目录标题 vue之排班日历的 实现 index.vue 排班日历组件 calendar.vue calendar.js vue之排班日历的 实现 查询日期和数据,展示对于的排班日历,蓝色为 ...

  4. 待办事项下拉html代码,HTML5 + jQuery 实现日历待办事项demo

    < head > < meta http-equiv = "Content-Type" content = "text/html; charset=ut ...

  5. Vue+TypeScript+Antd+Stylus+Flexible+阿里普惠体

    一.vue create yoye-front 创建项目 二.引入 normalize.css 安装 npm install normalize.css -S "main.ts" ...

  6. Vue中使用Fullcalendar日历开发日程安排

    效果图: 官方文档地址:Vue Component - Docs | FullCalendar 1.安装与FullCalendar相关的依赖项 npm install --save @fullcale ...

  7. vue中使用FullCalendar日历组件

    官方地址:https://fullcalendar.io/ 官方vue文档(比较简洁而且是英文的):https://fullcalendar.io/docs/vue 中文文档(jquery版本)地址: ...

  8. vue中使用FullCalendar日历插件

    文章目录 前言 一.FullCalendar兼容 二.使用步骤 1.引入库 2.载入使用 总结 前言 因为要实现一个类似任务日历的功能,于是翻看了vue创造的日历组件发现不能符合要求的,所以又找了几个 ...

  9. vue —— 带农历的日历功能

    闲来无事做一些简单功能,一边练习VUE的使用,一边锻炼逻辑思维能力.之前有个项目需要自己写一个月份选择器,由此想起来做一个简单的日历,做起来有一些自己感兴趣的东西,也为了记录一下,发个帖 首先,我做的 ...

最新文章

  1. 创业记——个人电脑、服务器选型
  2. mongodb 初学 意外 连接服务器异常(Connection refused)
  3. 乱谈Qt事件循环嵌套
  4. Py之openpyxl:openpyxl库的简介、安装、使用方法之详细攻略
  5. linux创建用户和组、设置文件权限
  6. /UI5/IF_UI5_REP_PERSISTENCE - why I cannot deploy app to GM6
  7. Avalonia跨平台入门第一篇
  8. hdu---1172猜数字
  9. 自助友情链接交换网站php源码,友情链接交换系统
  10. seo优化之如何选择产品
  11. Docker端口映射后,外机访问不了的问题
  12. 简单明了理解交叉验证
  13. 程序员实习期馒头加酸菜,转正后月薪10K起步:走路都带风
  14. 安卓手机突然很卡_安卓手机为什么很卡 安卓手机卡顿原因分析【详解】
  15. chm文档的编辑办法
  16. ExcelJS 导入导出excel带下拉框筛选数据
  17. 【无标题】There was an unexpected error (type=Internal Server Error, status=500).
  18. python樱花_python画樱花树代码 具体代码介绍
  19. requests使用代理IP
  20. 我的AI之路(54)--使用Pytorch内置的动作识别模型

热门文章

  1. GET和 POST非常浅薄的理解
  2. AUTOSAR SHE 密钥更新协议
  3. 联想笔记本ubuntu系统下的背光调节
  4. 禅说教育(之一)——百般说教不如帮人悟到
  5. (16) 基于图卷积神经网络的轨道交通流量预测
  6. 现代密码学之电子货币的加密
  7. 《Deep Learning for Computer Vision withPython》阅读笔记-StarterBundle(第4 - 5章)
  8. GreeNC:植物lncRNA数据库
  9. mysql 百万数据关联_mysql百万数据关联查询优化
  10. windows 10系统搭建sftp服务器【详细】