更新记录
1.0.3(2025-10-30)
下载此版本
样式代码从scss更改成css
1.0.2(2025-10-28)
下载此版本
修改文档
1.0.1(2025-10-28)
下载此版本
维护
查看更多
平台兼容性
uni-app(3.6.12)
| Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
| √ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
| 微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
快应用-华为 |
快应用-联盟 |
| √ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
uni-app x(3.6.12)
| Chrome |
Safari |
Android |
iOS |
鸿蒙 |
微信小程序 |
| - |
- |
- |
- |
- |
- |
xz-calendar 自定义日历
实现展示一周或者一个月的日历
Props
| 属性名 |
类型 |
是否必填 |
默认 |
可选 |
说明 |
| selected |
Array |
false |
[] |
无 |
打点数据;格式:[{date:'2025-10-25',info:'描述',mark:true,markColor:'red',infoColor:'red',...}] |
| type |
String |
false |
month |
month(月)、week(周) |
日历类型 |
Emits
| 事件名 |
接收值 |
说明 |
| changeDate |
{year:年,month:月,day:天,date:年-月-日,data:其他信息} |
当前选择日期 |
代码示例
数据
const selected = [
{
date:'2025-10-25',
info:'已打卡',
mark:true
},
{
date:'2025-10-26',
info:'已打卡',
mark:true
}
];
const type = 'month'
const changeDate = (dayInfo) =>{
console.log('当前选择日期', dayInfo);
}
组件
<template>
<xz-calendar :selected="selected" :type="type" @changeDate="changeDate"></xz-calendar>
</template>