更新记录

1.0.0(2022-11-29)

zzx-calendar 相关bug修复支持按年按月切换


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.6.5 × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × ×

平台兼容性 zzx-calendar 这是一款支持滑动切换以及周模式和月模式切换功能的日历组件,可以设置打卡信息,自定义样式。组件样式使用了sass所有需要项目中先安装node-sass和sass-loader。 日历组件,组件名:zzx-calendar,代码块: zzxCalendar。

组件调用方式 在你需要使用的页面或者组件引入zzx-calendar eg:

template

script

import zzxCalendar from "@/components/zzx-calendar/zzx-calendar.vue" export default { components: { zzxCalendar }, data() { return { }; }, methods: { datechange(e) { console.log(e); } } } 组件属性说明 props 组件提供很多自定义属性,比如是否显示返回今日的功能,今天日期,打点日期,选中日期的样式自定义,具体属性看下表:

属性名 数据类型 默认值 说明 duration Number 500 滑动动画时间 dotList Array [] 打点日期数据,格式为[{date: '2020-04-28',xxx: xxx}] showBack Boolean false 是否显示返回今日按钮 todayClass String is-today 当天日期的自定义class checkedClass String is-checked 点击选中日期的自定义class dotStyle Object {background: '#c6c6c6'} 打点日期的样式style 事件说明 事件名 说明 @selected-change 选中日期改变时触发 @days-change 当时间发生变化的时候触发,比如月份或者周变化,或者显示模式改变 更多事件可以在源代码添加,后续更新再添加

@selected-change 事件返回属性说明

{ time: 选中日期Date对象, show: true,// 是否显示 fullDate: "2020-04-30",// 选中日期格式化事件 isToday: false // 是否是今天 } @days-change 事件返回属性说明

// start和end均返回Date对象 当模式是周的时候返回本周的第一天和最后一天,当模式为月的时候返回本月的1号以及最后一天 { start: 开始时间, end: 结束时间 }

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问