更新记录

1.2.0(2025-12-29) 下载此版本

修复月统计组件样式问题

1.1.2(2025-12-29) 下载此版本

  1. 更新为 uni_modules规范
  2. 更新月日历组件样式错误;

1.1.1(2025-12-03) 下载此版本

增加默认展开折叠,可传,不传默为false不展开,是否默认展开(true: 展开/月视图, false: 折叠/周视图)

查看更多

平台兼容性

uni-app(4.55)

Vue2 Vue3 Vue2插件版本 Chrome Safari Safari插件版本 app-vue app-vue插件版本 app-nvue Android iOS 鸿蒙
1.2.0 1.2.0 1.2.0
微信小程序 微信小程序插件版本 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
1.2.0

uni-app x(4.55)

Chrome Safari Android iOS 鸿蒙 微信小程序
- - - - - -

evan-calendar

基于 uni-app + vue3 实现的考勤日历组件, 日/月视图 的考勤日历;支持微信小程序,App;

效果图

iShot_2025-11-23_02.33.07.gif

daily-calendar

日视图的考勤日历组件

属性 说明
v-model 可传,不传默认为当前日期
defaultExpanded 可传,不传默为false不展开,是否默认展开(true: 展开/月视图, false: 折叠/周视图)
weekStart 可选,周起始时:星期日(默认) 或 星期一, 传入指定值:'Sunday' 或 'Monday'
dateDotList 可选,日期的点的状态,格式:[{date: '2025-11-20', status: '0', value: ['0']}]
dotProps 可选,点状态的值以及对应的颜色, 格式:[{ label: '正常', status: '0', value: ['0'], color: '#4055DC' },{ label: '异常', status: '1', value: ['1'], color: '#f0883a' },{ label: '已处理异常', status: '2', value: ['1', '2'], color: '#D9D9D9' }]}
方法 说明
unified-change 统一事件
swiper-change 滑动切换时触发
change 点击时触发

使用示例:

<view style="padding: 32rpx;">
<DailyCalendar 
    v-model="date" 
    :dateDotList="dateDotList" 
    @swiper-change="onSwiperChange" 
    @change="onChange"
>
<!-- 插槽:自定义内容区域 -->
    <view>
        <view>
            <text>当前班次:</text>
            <text>不固定时间上下班:工作时长需满8个小时</text>
        </view>
        <view>
            <text>出勤情况:</text>
            <text>打卡2次,工时13.1小时</text>
        </view>
    </view>
</DailyCalendar>
</view>

monthly-calendar

月视图的考勤日历组件

属性 说明
v-model 可传,不传默认为当前日期
方法 说明
swiper-change 滑动切换时触发
change 点击时触发

使用示例:
<view class="p-32">
<MonthlyCalendar 
    v-model="date" 
    @change="onChange" 
    @swiper-change="onSwiperChange"
>
    <!-- 插槽:自定义内容区域 -->
    <view class="grid-list">
        <view>
            <view class="font-36 font-bold">13.2</view>
            <view class="sub-text">平均工时</view>
        </view>
        <view>
            <view class="font-36 font-bold">19</view>
            <view class="sub-text">出勤天数</view>
        </view>
        <view>
            <view class="font-36 font-bold">200</view>
            <view class="sub-text">应出勤时间长</view>
        </view>
    </view>
</MonthlyCalendar>
</view>

隐私、权限声明

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

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

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

许可协议

MIT协议