uniapp上班考勤打卡情况日历展示

需求：请求后端接口数据，（每个月的打卡情况），并且将数据展示在日历里面

步骤

1：找到官网教程文档，实现一个静态的展示页面，https://ext.dcloud.net.cn/plugin?id=56


<template><view><uni-calendar :insert="true":lunar="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change"></uni-calendar></view>
</template><script>import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'export default {components: {uniCalendar},data() {return {};},methods: {change(e) {console.log(e);}}};</script>

大概是这样的，如果有不懂的地方可以查看官方文档说明

2：用于展示打开情况，我这里选择了用红色点标记，在view里面写上:selected="selected"，并且在data里面定义要展示的数据

<template><view><uni-calendar :insert="true":lunar="true" :selected="selected":start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change"></uni-calendar></view>
</template><script>import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'export default {components: {uniCalendar},data() {return {selected: [{date: '2019-12-1'}, {date: '2019-12-3'}, {date: '2019-12-4'}, {date: '2019-12-6'}]};},methods: {change(e) {console.log(e);}}};</script>

这个时候，就可以看到自己想要标记的日期了，但是这些都是前端静态展示，实际项目中，需要请求接口数据，并且渲染

3：将data()数据写在前端的模拟接口里面，前面在uni-app项目里使用node服务实现模拟接口https://www.jianshu.com/p/de04ec824928，现在就可以派上用场了
将数据写入文件，并且运行node --inspect server.js，可以看到接口可以访问了

let data = {"selected": [{"date": '2019-12-1'}, {"date": '2019-12-3'}, {"date": '2019-12-4'}, {"date": '2019-12-6'}]
}
module.exports = {data: data
}

4：写一个请求uni.request，请求接口，并且将接口返回数据赋值到自己在data里面定义的空数组中。
完整示例代码：

<template><view><uni-calendar :insert="true" :lunar="true" :selected="selected" :start-date="'2019-3-2'" :end-date="'2019-5-20'"@change="change"></uni-calendar></view>
</template>
<script>import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'export default {components: {uniCalendar},data() {return {selected: [],};},onLoad() {this.getList();},methods: {getList() {uni.request({url: 'http://localhost:3000/data3',success: (res) => {console.log(res.data);this.selected = res.data.selected;}});},change(e) {console.log(e);},}};
</script>

OK,显示成功了，撒花~

欢迎关注【编程微刊】公众号，回复【领取资源】,500G编程学习资源干货免费送。

uniapp上班考勤打卡情况日历展示相关推荐

仿钉钉考勤统计页面的日历组件，通过日历展示每日考勤打卡情况，支持在日历上打两种不同类型的点，大致适配各种分辨率效果图
原文链接:uniapp : 仿钉钉考勤统计页面的日历组件,通过日历展示每日考勤打卡情况,支持在日历上打两种不同类型的点,大致适配各种分辨率 - northwest - 博客园 (cnblogs.com ...
每日统计部门人员考勤打卡情况并汇总通知
在值班时,HR需要及时了解到部分人员的打卡情况.这个时候,可以通过腾讯云HiFlow来实现自动通知考勤打卡情况. 实现步骤: Step1:我们进入腾讯云HiFlow官网,进入控制台.我们在触发应用选择 ...
uniapp 仿钉钉考勤统计页面的日历组件，通过日历展示每日考勤打卡情况，支持在日历上打两种不同类型的点，大致适配各种分辨率
https://www.cnblogs.com/northwest332/p/16016544.html
c语言之学生考勤打卡系统
1.引言在如今随着社会的反展和信息技术的进步.全球信息化的趋势越来越明显.几乎没有一个学校不在走信息化的路子.都在用自己的智慧将工作效率一步一步的提升.在现在的高校中.由于学生的分布式教学.造成了教 ...
基于uni-app+uni ui考勤打卡H5项目定位打卡，日历打卡记录，考勤记录，绩效（地图位置）等
基于uni-app+uni ui考勤打卡H5项目功能点:定位打卡,迟到,外勤,日历打卡记录,请假,出差,补卡,考勤记录,绩效(地图位置)等: 前言提示: 1.该项目所有数据基于前端为数据,后期可直 ...
android 日历考勤管理,android studio中使用recyclerview制作个显示考勤打卡的日历来...
1. 用户在app端选择个日期就能查询这个月的考勤打卡信息,并以日历上标注不同的颜色来显示给用户,当然这个日历是recyclerview做出来的,只是每行显示7个,表示一周的七天. 2. 员工考勤打卡 ...
已经提了离职，还有一周就走，公司突然把我移出企业微信，没法考勤打卡，还要继续上班吗？...
黎明前的黑暗最容易出事,离职前的几天也最容易出幺蛾子,比如下面这位网友的遭遇: 已经提了离职,还有一周就正式离职了,公司突然把我移出企业微信,没法考勤打卡了, 还要继续上班吗?该怎么办? 有人说,自己 ...
计算机毕业设计Python+uniapp实验室考勤小程序(小程序+源码+LW)
计算机毕业设计Python+uniapp实验室考勤小程序(小程序+源码+LW) 该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程项目运行环境配置: Pychram社区版+ pytho ...
WIFI 考勤打卡浅析
WIFI 考勤打卡浅析一.背景最近产品部提出了在WEB端设置wifi考勤打卡新需求,根据管理员设置的wifi相关信息(主要是WIFI名称和MAC地址),员工用户利用移动端相连接的wifi进行wi ...
好用的考勤打卡APP
严谨的考勤制度可以帮助员工树立明确的时间观念,也方便企业更好地管理员工,哪一款考勤打卡软件更好用呢? 前言对于一个企业来说,企业文化应该包含良好的制度,这样可以更好地管理员工,毕竟"无规矩 ...

uniapp上班考勤打卡情况日历展示

步骤

uniapp上班考勤打卡情况日历展示相关推荐

最新文章

热门文章