uniapp zjy-calendar日历，uni-calendar日历增强版

比眉伴天荒 2024-03-17 17:48 88阅读 0赞

## 一、zjy-calendar简介 ##

> zjy-calendar日历是对uniapp uni-calendar日历的增强，支持圆点和文字自定义颜色。

![在这里插入图片描述][12506e15f16e4d2f91852dc0a147ad09.png]

## 二、使用方法 ##

源使用说明：[https://uniapp.dcloud.net.cn/component/uniui/uni-calendar.html][https_uniapp.dcloud.net.cn_component_uniui_uni-calendar.html]

### 1、下载导入 ###

[https://ext.dcloud.net.cn/plugin?id=13509][https_ext.dcloud.net.cn_plugin_id_13509]

### 2、引入组件 ###

import zjyCalendar from '@/uni_modules/zjy-calendar/components/zjy-calendar/zjy-calendar.vue'

### 3、selected数组对象中增加dropColor和fontColor属性 ###

this.info.selected = [{
        
    		date: getDate(new Date(), -3).fullDate,
    		info: '打卡',
    		dropColor:'#2ddb58',//设置点的颜色
    		fontColor:'#2ddb58',//设置字体的颜色
    	},
    	{
        
    		date: getDate(new Date(), -2).fullDate,
    		info: '签到',
    		dropColor:'#2d3ddb',//设置点的颜色
    		fontColor:'#2d3ddb',//设置字体的颜色
    		data: {
        
    			custom: '自定义信息',
    			name: '自定义消息头'
    		}
    	},
    	{
        
    		date: getDate(new Date(), -1).fullDate,
    		info: '已打卡'
    	}
    ]

## 三、示例 ##

<template>
    	<view class="content">
    		
    		<zjy-calendar class="uni-calendar--hook" :selected="info.selected" :showMonth="false" @change="change"
    			@monthSwitch="monthSwitch" />
    	</view>
    </template>
    <script>
    	import zjyCalendar from '@/uni_modules/zjy-calendar/components/zjy-calendar/zjy-calendar.vue'
    	/**
    	 * 获取任意时间
    	 */
    	function getDate(date, AddDayCount = 0) {
          
    		if (!date) {
          
    			date = new Date()
    		}
    		if (typeof date !== 'object') {
          
    			date = date.replace(/-/g, '/')
    		}
    		const dd = new Date(date)
    
    		dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
    
    		const y = dd.getFullYear()
    		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
    		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
    		return {
          
    			fullDate: y + '-' + m + '-' + d,
    			year: y,
    			month: m,
    			date: d,
    			day: dd.getDay()
    		}
    	}
    	export default {
          
    		components: {
          
    			zjyCalendar
    		},
    		data() {
          
    			return {
          
    				title: 'Hello',
    				clockInList: [],
    				valiFormData: {
          },
    				info: {
          
    					lunar: true,
    					range: true,
    					insert: false,
    					selected: []
    				}
    			}
    		},
    		onLoad() {
          
    
    		},
    		onReady() {
          
    			// TODO 模拟请求异步同步数据
    			setTimeout(() => {
          
    				this.info.date = getDate(new Date(), -30).fullDate
    				this.info.startDate = getDate(new Date(), -60).fullDate
    				this.info.endDate = getDate(new Date(), 30).fullDate
    				this.info.selected = [{
          
    						date: getDate(new Date(), -3).fullDate,
    						info: '打卡',
    						dropColor:'#2ddb58',//设置点的颜色
    						fontColor:'#2ddb58',//设置字体的颜色
    					},
    					{
          
    						date: getDate(new Date(), -2).fullDate,
    						info: '签到',
    						dropColor:'#2d3ddb',//设置点的颜色
    						fontColor:'#2d3ddb',//设置字体的颜色
    						data: {
          
    							custom: '自定义信息',
    							name: '自定义消息头'
    						}
    					},
    					{
          
    						date: getDate(new Date(), -1).fullDate,
    						info: '已打卡'
    					}
    				]
    			}, 2000)
    		},
    		methods: {
          
    			monthSwitch() {
          
    				console.info("monthSwitch")
    			},
    			change() {
          
    				console.info("change")
    			}
    		}
    	}
    </script>

[12506e15f16e4d2f91852dc0a147ad09.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/45fa0a98fc204e30b35cd612f5ec3245.png
[https_uniapp.dcloud.net.cn_component_uniui_uni-calendar.html]: https://uniapp.dcloud.net.cn/component/uniui/uni-calendar.html
[https_ext.dcloud.net.cn_plugin_id_13509]: https://ext.dcloud.net.cn/plugin?id=13509