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-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的使用,一边锻炼逻辑思维能力.之前有个项目需要自己写一个月份选择器,由此想起来做一个简单的日历,做起来有一些自己感兴趣的东西,也为了记录一下,发个帖 首先,我做的 ...
最新文章
- 创业记——个人电脑、服务器选型
- mongodb 初学 意外 连接服务器异常(Connection refused)
- 乱谈Qt事件循环嵌套
- Py之openpyxl:openpyxl库的简介、安装、使用方法之详细攻略
- linux创建用户和组、设置文件权限
- /UI5/IF_UI5_REP_PERSISTENCE - why I cannot deploy app to GM6
- Avalonia跨平台入门第一篇
- hdu---1172猜数字
- 自助友情链接交换网站php源码,友情链接交换系统
- seo优化之如何选择产品
- Docker端口映射后,外机访问不了的问题
- 简单明了理解交叉验证
- 程序员实习期馒头加酸菜,转正后月薪10K起步:走路都带风
- 安卓手机突然很卡_安卓手机为什么很卡 安卓手机卡顿原因分析【详解】
- chm文档的编辑办法
- ExcelJS 导入导出excel带下拉框筛选数据
- 【无标题】There was an unexpected error (type=Internal Server Error, status=500).
- python樱花_python画樱花树代码 具体代码介绍
- requests使用代理IP
- 我的AI之路(54)--使用Pytorch内置的动作识别模型