ai-watch-app/uni_modules/punch-calendar

punch-calendar

punch-calendar为有打卡需求制作的日历，可标记小圆点。简单配置即可使用，代码体积小，无第三方引用。
任何问题可以评论联系我，第一时间处理，或者添加 🛰️:ljsw8686

使用方法

demo:

<template>
	<view class="content">
		<punch-calendar @switchMonth="switchMonth" @chooseDay="chooseDay" :errorList="errorList" :successList="successList" ref="calendar"></punch-calendar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				successList: ['1676995200000'],
				errorList: ['1676908800000'],
				
			}
		},
		onLoad() {
			// 初始化
			this.$refs.calendar.initCalendar()
			
			// 模拟异步赋值
			let timer = setTimeout(()=>{
				this.addTimer()
			},2000)
			
		},
		methods: {
			// 点击某一天
			chooseDay(val) {
				console.log(val)
			},
			
			addTimer() {
				this.successList = [...this.successList, '1681920000000']
			},
			
			/**
			 * 切换事件
			 * @param type 切换类型 prev next
			 * @param nowYear 当前年
			 * @param nowMonth 当前月
			 * **/
			switchMonth(type, nowYear, nowMonth){
				//... doSomeThing
				if(nowYear == '2023' && nowMonth == '3' && !this.successList.includes('1678204800000')){
					uni.showLoading({})
					let timer = setTimeout(()=>{
						uni.hideLoading()
						clearTimeout(timer)
						this.successList = [...this.successList, '1678204800000']
					},3000)
				}
				
			}
		}
	}
</script>

配置说明：

参数说明：

参数	说明	默认值	类型
successList	打卡成功标记，传入13位时间戳	[]	Array
errorList	打卡异常标记，传入13位时间戳	[]	Array

回调方法

方法名称	说明	返回值
@chooseDay	点击某日时候执行函数	返回一个对象，包含年、月、日
@switchMonth	切换日期时候执行	返回type（切换类型，prev｜｜next）, 当前年nowYear,当前月nowMonth