LimeDailyPunch 打卡签到日历

一款签到打卡的日历插件，数据驱动，支持补签和统计连续打卡天数。兼容uniapp/uniappx。

插件依赖：lime-style,lime-shared

基础功能

• 支持自定义打卡日期
• 支持补签功能
• 统计连续打卡天数
• 支持切换月份
• 支持自定义样式

文档链接

📚 组件详细文档请访问以下站点：

• 打卡日历文档 - 站点1
• 打卡日历文档 - 站点2
• 打卡日历文档 - 站点3

安装方法

1. 在uni-app 中搜索并导入lime-daily-punch
2. 首次导入可能需要重新编译

代码演示

基础使用

通过设置signedDates传入已经打卡的日期

<l-daily-punch :signedDates="checkIns"></l-daily-punch>

// 已打卡
const checkIns = ref(['2024-09-12','2024-09-02','2024-09-10','2024-09-03'])

事件

当点击日期时，触发select事件，当传入已打卡日期会触发streak事件，这事件是统计连续打卡天数，当切换月份时触发panelChange

<l-daily-punch :signedDates="checkIns" @select="select" @panelChange="change"></l-daily-punch>

import { LimeDailyPunchDay,  LimeDailyPunchYearMonth} from '@/uni_modules/lime-daily-punch'

// 已打卡
const checkIns = ref(['2024-09-12','2024-09-02','2024-09-10','2024-09-03'])

const select = (day : LimeDailyPunchDay) => {
	if (day.canSupplement) {
		uni.showModal({
			title: '补签',
			content: '是否补签？',
			success: (res : ShowModalSuccess) => {
				if (!res.confirm) return
				checkIns.value.push(day.fullDate)
			}
		})
	}
	if(!day.isCheckedIn) {
		console.log('已签')
		uni.showModal({
			title: '签到',
			content: '是否签到？',
			success: (res : ShowModalSuccess) => {
				if (!res.confirm) return
				checkIns.value.push(day.fullDate)
			}
		})
	}
	if(day.isToday) {
		console.log('今天')
	}
}

const change = (res: LimeDailyPunchYearMonth) => {
	console.log('res', res)
}

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-daily-punch/components/lime-daily-punch -->
<lime-daily-punch />

插件标签说明

• l-daily-punch：打卡日历组件
• lime-daily-punch：演示标签

API文档

Props

参数	说明	类型	默认值
canSupplement	是否支持补签	boolean	true
yearMonth	显示年月，格式：YYYY-MM	string	当前月份
signedDates	打卡数据,格式：YYYY-MM-DD[]	string[]	[]
dayHeight	天格子的高度	number	76
week	星期	string[]	['周日', '周一', '周二', '周三', '周四', '周五', '周六']
weekStartsOn	星期几为一周的开始，默认是6，即周一	number	6
weekColor	星期文本颜色	string	#BDC0C3
weekFontSize	星期文本字体	number	14
weekHeight	星期文本高度	number	30
selectedDayBgColor	选择中背景色	string	rgba(0,0,0,0.06)
dayFontSize	天的字体大小	number	16
textColor	文本颜色	string	#1A1F24
disabledColor	禁用颜色(日历中非本月的日期，week文本)	string	#BDC0C3
monthTitleHeight	日历年月标题高度	number	50
monthTitleFontSize	日历年月标题字体大小	number	20
color	主色，签到和today选中颜色	string	#3B87F6
unsignedColor	可补签小点颜色	string	#F1A33A'

主题定制

组件提供了以下CSS变量，可用于自定义样式：
组件在uniappx是基于canvas故不支持变量,仅uniapp支持

变量名称	默认值	说明
--l-daily-punch-month-title-height	50px	月份标题高度
--l-daily-punch-month-title-font-size	18px	月份标题字体大小
--l-daily-punch-month-title-color	#1A1F24	月份标题颜色
--l-daily-punch-arrow-size	28px	月份切换箭头大小
--l-daily-punch-arrow-color	#A0A5AA	月份切换箭头颜色
--l-daily-punch-week-height	30px	星期栏高度
--l-daily-punch-week-font-size	$font-size	星期文字大小
--l-daily-punch-week-color	#BDC0C3	星期文字颜色
--l-daily-punch-day-height	76px	日期单元格高度
--l-daily-punch-day-font-size	$spacer	日期文字大小
--l-daily-punch-text-color	#1A1F24	日期文字颜色
--l-daily-punch-disabled-color	#BDC0C3	禁用日期颜色
--l-daily-punch-dot-size	6px	状态点大小
--l-daily-punch-color	#3B87F6	已打卡状态颜色
--l-daily-punch-unsigned-color	#F1A33A	未打卡状态颜色
--l-daily-punch-selected-bg-color	$fill-2	选中状态背景色

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助

源代码

组件源码