一、zjy-calendar简介

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

二、使用方法

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

1、下载导入

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补0const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0return {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).fullDatethis.info.startDate = getDate(new Date(), -60).fullDatethis.info.endDate = getDate(new Date(), 30).fullDatethis.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>

uniapp zjy-calendar日历，uni-calendar日历增强版相关推荐

c linux time微秒_Python时间处理模块：time模块、datetime模块及日历模块Calendar
无论是那一个开发语言进行开发,时间的处理都是非常重要的,正确的处理时间是一个程序员开发中必备的技能,特别是对时间精度要求比较高,或者是要分清楚本地时间和服务器时间的这些业务要求,今天就来讲一讲Pyth ...
2019日历全年一张_python 日历模块calendar
calendar #打印2019年的日历x= calendar.calendar(2019)print(x) #打印全年日历 calendar.prcal(2019) # 打印月份 c = calen ...
java中实现工厂日历_Java Calendar实现控制台日历
public static void main(String[] args) throws IOException { //初始化日历对象 Calendar calendar = Calendar.g ...
php日期控件calendar.js,轻量级的原生js日历插件calendar.js使用指南
使用说明: 需要引入插件calendar.js/calendar.min.js 须要引入calendar.css 样式表,可以自定义自己想要的皮肤本日历插件支持cmd模块化如下调用:xvDate( ...
python日历节日表_python日历模块_Python日历模块| calendar（）方法与示例
python日历模块 Python calendar.calendar()方法 (Python calendar.calendar() Method) calendar() method is an ...
Python学习八：pip 最常用命令、pip升级、pip 清华大学开源软件镜像站、Python日期和时间（Time模块、日历（Calendar）模块）
pip 是 Python 包管理工具,该工具提供了对Python 包的查找.下载.安装.卸载的功能. 注意:Python 2.7.9 + 或 Python 3.4+ 以上版本都自带 pip 工具. p ...
日历插件（项目总结）（包括mobiscroll.js LCalendar 和Calendar这三个日历插件）
日历插件的总结,由于在项目中经常用到日历,所以需要总结一下日历插件的用法日历初始化 var date = new Date(); var today = dateUtil.dateFormat(da ...
python日历函数_Python—日历函数—日历模块的常用函数,calendar,常见
Python-日历函数-日历模块的常用函数,calendar,常见发表时间:2020-07-07 日历函数 calendar模块中提供了非常多的函数来处理年历和日历. 例如:打印2020年7月份的日 ...
python日历模块_python 日历模块calendar
calendar #打印2019年的日历 x= calendar.calendar(2019) print(x) #打印全年日历 calendar.prcal(2019) # 打印月份 c = cal ...
学习笔记之python3中关于日历（calendar）模块
1 calendar模块日历模块函数与日历相关,其中星期一默认为每周第一天,星期天为默认的最后一天:更改此设置需要调用calendar.setfirstweekday()函数. 1.1 calend ...

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

一、zjy-calendar简介

二、使用方法

1、下载导入

2、引入组件

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

三、示例

uniapp zjy-calendar日历，uni-calendar日历增强版相关推荐

最新文章

热门文章