小程序仿钉钉分享打卡日历实现

qingqing不吃胡萝卜

已于 2024-07-16 16:25:07 修改

阅读量1.9k

点赞数 1

文章标签：微信小程序钉钉小程序 html

于 2023-05-15 15:10:03 首次发布

本文链接：https://blog.youkuaiyun.com/qingqingbchlb/article/details/130684565

版权

本文介绍如何使用uniapp的uni-calendar组件，仿制钉钉的分享打卡日历功能。通过修改uni-calendar-item的样式，实现自定义效果，达成小程序的签到或打卡需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本小程序是用的分享达到两次即打卡成功，如果是签到的话，变成按钮实现功能即可。

效果图

这里用的是uniapp的自带日历组件uni-calendar，找到对应文件，进行样式修改。

这里是uni-calendar-item的样式详细代码说明

<template>
	<!-- 'uni-calendar-item--checked':(calendar.fullDate === weeks.fullDate && !weeks.isDay) , -->
	<!-- 'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay, -->
	<view class="uni-calendar-item__weeks-box" :class="{
		'uni-calendar-item--disable':weeks.disable,
		'uni-calendar-item--before-checked':weeks.beforeMultiple,
		'uni-calendar-item--multiple': weeks.multiple,
		'uni-calendar-item--after-checked':weeks.afterMultiple,
		}"
	 @click="choiceDate(weeks)">
		<view class="uni-calendar-item__weeks-box-item">
			<text v-if="selected&&weeks.extraInfo" :class='{"uni-calendar-item__weeks-box-circle":weeks.extraInfo.nComplete===1,"uni-calendar-item__weeks-box-circlered":weeks.extraInfo.nComplete===0&&weeks.extraInfo.nCount===1}'></text>
			<text v-else :class="{'uni-calendar-item__weeks-box-circlegray':!weeks.disable}"></text>
			<text class="uni-calendar-item__weeks-box-text" :class="{
				'uni-calendar-item--isDay-text': weeks.isDay,
				'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
				'uni-calendar-item--before-checked':weeks.beforeMultiple,
				'uni-calendar-item--multiple': weeks.multiple,
				'uni-calendar-item--after-checked':weeks.afterMultiple,
				'uni-calendar-item--disable':weeks.disable,
				}">{{weeks.date}}</text>
			<text v-if="!lunar&&!weeks.extraInfo && weeks.isDay" class="uni-calendar-item__weeks-lunar-text" :class="{
				'uni-calendar-item--isDay-text':weeks.isDay,
				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
				'uni-calendar-item--before-checked':weeks.beforeMultiple,
				'uni-calendar-item--multiple': weeks.multiple,
				'uni-calendar-item--after-checked':weeks.afterMultiple,
				}">{{todayText}}</text>
			<text v-if="lunar&&!weeks.extraInfo" class="uni-calendar-item__weeks-lunar-text" :class="{
				'uni-calendar-item--isDay-text':weeks.isDay,
				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
				'uni-calendar-item--before-checked':weeks.beforeMultiple,
				'uni-calendar-item--multiple': weeks.multiple,
				'uni-calendar-item--after-checked':weeks.afterMultiple,
				'uni-calendar-item--disable':weeks.disable,
				}">{{weeks.isDay ? todayText : (weeks.lunar.IDayCn === '初一'?weeks.lunar.IMonthCn:weeks.lunar.IDayCn)}}</text>
				<!-- 'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay, -->
			<text v-if="weeks.extraInfo&&weeks.extraInfo.info" class="uni-calendar-item__weeks-lunar-text" :class="{
				'uni-calendar-item--extra':weeks.extraInfo.info,
				'uni-calendar-item--isDay-text':weeks.isDay,
				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
				'uni-calendar-item--before-checked':weeks.beforeMultiple,
				'uni-calendar-item--multiple': weeks.multiple,
				'uni-calendar-item--after-checked':weeks.afterMultiple,
				'uni-calendar-item--disable':weeks.disable,
				}">{{weeks.extraInfo.info}}</text>
		</view>
	</view>
</template>

<script>
	import { initVueI18n } from '@dcloudio/uni-i18n'
	import i18nMessages from './i18n/index.js'
	const {	t	} = initVueI18n(i18nMessages)

	export default {
		emits:['change'],
		props: {
			weeks: {
				type: Object,
				default () {
					return {}
				}
			},
			calendar: {
				type: Object,
				default: () => {
					return {}
				}
			},
			selected: {
				type: Array,
				default: () => {
					return []
				}
			},
			lunar: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			todayText() {
				return t("uni-calender.today")
			},
		},
		methods: {
			choiceDate(weeks) {
				this.$emit('change', weeks)
				console.log("111111111",weeks)
			}
		}
	}
</script>

<style lang="scss" scoped>
	$uni-font-size-base:14px;
	$uni-text-color:#333;
	$uni-font-size-sm:12px;
	$uni-color-error: #e43d33;
	$uni-opacity-disabled: 0.3;
	$uni-text-color-disable:#c0c0c0;
	$uni-primary: #006BFF !default;
	.uni-calendar-item__weeks-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.uni-calendar-item__weeks-box-text {
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		// background: #006BFF;
		// box-shadow: 0rpx 4rpx 8rpx 1rpx rgba(0,107,255,0.5);
		// border-radius: 10rpx 10rpx 10rpx 10rpx;
		font-size: $uni-font-size-base;
		color: $uni-text-color;
		text-align: center;
	}

	.uni-calendar-item__weeks-lunar-text {
		font-size: $uni-font-size-sm;
		color: $uni-text-color;
	}

	.uni-calendar-item__weeks-box-item {
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100rpx;
		height: 100rpx;
	}

	.uni-calendar-item__weeks-box-circle {
		position: absolute;
		top: 44px;
		right: 44%;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background-color: #00E6C0;

	}
	.uni-calendar-item__weeks-box-circlegray {
		position: absolute;
		top: 44px;
		right: 44%;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background-color: #ccc;
	
	}
	.uni-calendar-item__weeks-box-circlered {
		position: absolute;
		top: 44px;
		right: 44%;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background-color: #FF512D;
	
	}

	.uni-calendar-item--disable {
		background-color: rgba(249, 249, 249, $uni-opacity-disabled);
		color: $uni-text-color-disable;
	}

	.uni-calendar-item--isDay-text {
		color: $uni-primary;
	}

	.uni-calendar-item--isDay {
		width: 50rpx;
		height: 50rpx;
		background-color: $uni-primary;
		box-shadow: 0rpx 4rpx 8rpx 1rpx rgba(0,107,255,0.5);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		color: #fff;
	}

	.uni-calendar-item--extra {
		color: $uni-color-error;
		opacity: 1;
	}

	.uni-calendar-item--checked {
		background-color: $uni-primary;
		box-shadow: 0rpx 4rpx 8rpx 1rpx rgba(0,107,255,0.5);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		color: #fff;
		opacity: 1;
	}

	.uni-calendar-item--multiple {
		background-color: $uni-primary;
		color: #fff;
		opacity: 0.8;
	}
	.uni-calendar-item--before-checked {
		background-color: #ff5a5f;
		color: #fff;
	}
	.uni-calendar-item--after-checked {
		background-color: #ff5a5f;
		color: #fff;
	}
</style>

利用uni自己的日历插件，主要就是在文件里修改成自己想要的样式，耐心一下下就能改好了！！