# attendance-calendar

**Repository Path**: evan_origin_admin/attendance-calendar

## Basic Information

- **Project Name**: attendance-calendar
- **Description**: 使用 uni-app ,基于 Vue3 中的 swiper 做考勤日历组件；
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-11-23
- **Last Updated**: 2025-12-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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

## 效果图
![iShot_2025-11-23_02.33.07.gif](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`        | 点击时触发   |


使用示例：
```vue
<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`        |  点击时触发           |


```vue

使用示例：
<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>
```