项目场景:

先上需求,如下图:

需求描述:

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

解决方案:

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. 一个6年的菜鸟,在4年之前做的一些功能(二)
  2. C#操作excel(多种方法比较)
  3. faster rcnn源码解读(三)train_faster_rcnn_alt_opt.py
  4. 几款强大的 Pandas 数据探索工具,推荐收藏使用
  5. Oracle获取月初/月末/季初/季末/半年初/半年末/年初/年末
  6. 最新Linux教程发布下载【最后更新4月12日
  7. github大学课程_GitHub基础教程:如何使用GitHub课程
  8. 扫地机器人划伤地板_扫地机器人哪个牌子好?会选的才能买到好产品
  9. 排序不等式、证明及其应用
  10. 各种排序算法的实现直接插入排序
  11. 【TSP】基于matlab遗传算法求解13城市旅行商问题【含Matlab源码 1255期】
  12. win7安装SQL2005图文教程
  13. 谭浩强c语言程序设计 在线,C语言程序设计_谭浩强.pdf
  14. 华为hcna认证有哪些优势?华为hcna认证好考吗?
  15. win10耳机插入电脑里没有声音的新感想
  16. win10计算机出现乱码,win10系统出现汉字乱码如何解决
  17. python实现下载网络视频资源
  18. 触动精灵安卓手游内存教程(类人猿手游内存教程系列)
  19. Unity-安卓端透明背景设置
  20. mac英文输入模式下不能长按连续输入

热门文章

  1. MFC判断文件或文件夹是否存在函数
  2. 为项目选择适合的室内定位技术与方案
  3. 企业战略 平台转型:不走寻常路
  4. 基于spaCy实现pytextrank对英文短语抽取
  5. java continu语句
  6. 学IT,是不是穷人家孩子获得高收入的唯一出路?
  7. error: ‘integer_sequence’ is not a member of ‘std’
  8. 蓝月传奇怎么显示无服务器,关于此次蓝月传奇突然关闭的说明!
  9. python tkinter界面基础----文艺范儿
  10. 标准化,归一化,二值化,One-Hot,卡方检验选取重要特征,主成分分析,缺失值和异常值处理