小程序实现日历打卡功能

本文实例为大家分享了小程序实现日历打卡功能的具体代码，供大家参考，具体内容如下 一、效果图展示 老惯例，先上效果图 二、实现思路 1、日历展示 例如下图中： 2021月7月打卡日历页面，共35个日期数据，上月残余4天+本月31天； 2021月6月打卡日历页面，共35个日期数据，上月残余2天+本月30天+下月残余3天； 2021月5月打卡日历页面，共42个日期数据，上月残余6天+本月31天+下月残余5天。 【结论】打卡日历页面存在展示35个或42个日期数据的情况，35个或42个日期数据=当前显示月所有日期数据+上月残余尾部日期+下月残余头部日期。 计算出每个月的日期天数，获取本月1号是周几，上月残余天数=本月1号的星期X的X数（比如，2021年7月1日是星期四，则上月残余4天），假设 a=35-本月天数-上月残余天数。如果a>=0,则下月残余天数=a;如果a<0，则下月残余天数=7+a (比如2021年5月，35-37=-2;7+(-2)=5) 2、打卡功能 打卡实现的功能：可打卡的日期为今日日期或今日日期之前未打卡过的日期。 如图：今日日期为绿色圆形背景，当前点击日期为橙色圆形背景；可打卡时，打卡按钮背景为蓝色，不可打卡时，打卡背景为灰色；√ 代表已打卡。 通过数据库查询当前已打卡的数据，已打卡的数据需要设置打卡按钮禁用标志。打卡按钮禁用的情况（1）页面初始化时，未点击任何日期（2）当前点击的日期在今天之后（3）当前日期在今天之前但已打卡。 点击打卡，记录打卡日期并保存至数据库。 三、代码 1、数据库数据 2、日历组件 【calendar.wxml】 代码里使用了WXS页内脚本，渲染“已打卡”的标志（√） 【calendar.wxss】 【calendar.js】 3、打卡及统计 【calendarCard.wxml】 【calendarCard.wxss】 【calendarCard.js】 【calendarCard.json】 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。 您可能感兴趣的文章:微信小程序实现打卡日历功能微信小程序实现拍照打卡功能JavaScript实现微信小程序打卡时钟项目实例微信小程序实战之打卡时钟的绘制如何通过Python实现定时打卡小程序python实现自动打卡小程序微信小程序实现打卡签到页面