更新记录

0.0.1(2024-03-08) 下载此版本

高度自定义的日历组件,可实现签到打卡等功能,


平台兼容性

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

API

使用示例:

<template>
    <view>
        <mmdt-calendar :borderRadius="'12rpx'" :isOpen="false" @click=handleClick @switchMonth="switchMonth">
            <!-- 通过slot自定义内容 -->
            <block slot-scope="obj">
                <text>{{obj.data.date}}</text>
            </block>
        </mmdt-calendar>
    </view>
</template>
<script>
export default {
    data() {
        return {

        }
    },
    methods: {
        handleClick(date, dateObj) {
            console.log('date', date, dateObj)
        },
        switchMonth(date) {
            console.log('date', date)
        }
    }
}
</script>
<style lang="scss" scoped></style>

Attribute

属性名 说明 类型 默认值 可选值
week week展现形式 String x-zh z-zh("周x") | x-zh("星期x") | abb-en("Mon")
borderRadius 日历外框圆角 String 16rpx -
errorText 限制超出当月提示语 String 不能选择未来日期 -
list 外部传入的数据(注:传入的对象数组需包含'signTime'字段,字段格式为日期字符串,如:'01.12') Array [ ] -
isOpen 是否以“周”展现 Boolean true false
isFuture 是否允许选择未来日期 Boolean true false

Calendar Events

事件名 说明 返回参数
@switchMonth 切换月份事件 '年-月' 字符串,例:'2024-03'
@click 选择日期事件 参数一:选择日期字符串,例:'2024-3-1';参数二:选择日期的相关对象,请参考使用示例。

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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