@tongziyang/uni-calendar-plugin/README.md

A comprehensive calendar plugin for uniapp with support for Gregorian and Lunar calendars, date selection, hotel booking, check-in functionality, and more.

# uni-calendar-plugin

一个功能丰富的日历插件，专为uniapp开发，使用Vue3 + Composition API + TypeScript构建。

## 功能特点

- 支持公历日历和农历日历显示
- 支持单选日期和区间日期选择
- 酒店入住选择功能，可显示价格
- 打卡功能和往期打卡标记
- 节假日标记（休息标签）
- 支持年、月、周、日视图切换
- 高度自动伸缩适应内容
- 兼容所有平台（H5、App、微信小程序等）

## 安装

```bash
# 使用npm
npm install uni-calendar-plugin

# 使用yarn
yarn add uni-calendar-plugin

# 使用pnpm
pnpm add uni-calendar-plugin
```

## 使用方法

```vue
<template>
  <uni-calendar-plugin 
    v-model="selectedDate"
    :mode="mode"
    :show-lunar="showLunar"
    @date-click="handleDateClick"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import UniCalendarPlugin from 'uni-calendar-plugin';

const selectedDate = ref(new Date());
const mode = ref('month'); // 'year', 'month', 'week', 'day'
const showLunar = ref(true);

const handleDateClick = (date: Date) => {
  console.log('Selected date:', date);
};
</script>
```

## 配置选项

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| v-model | Date/[Date, Date] | 当前日期 | 选中的日期，可以是单个日期或日期区间 |
| mode | string | 'month' | 显示模式，可选值：'year', 'month', 'week', 'day' |
| showLunar | boolean | false | 是否显示农历 |
| showHoliday | boolean | true | 是否显示节假日标记 |
| showPrice | boolean | false | 是否显示价格（酒店模式下） |
| priceData | object | {} | 价格数据，格式为 {日期: 价格} |
| checkInData | array | [] | 打卡数据，日期数组 |
| rangeMode | boolean | false | 是否开启区间选择模式 |

## 事件

| 事件名 | 说明 | 参数 |
| --- | --- | --- |
| date-click | 点击日期时触发 | date: Date |
| range-change | 区间变化时触发 | [startDate: Date, endDate: Date] |
| month-change | 月份变化时触发 | date: Date |
| check-in | 打卡时触发 | date: Date |

## 插槽

| 插槽名 | 说明 |
| --- | --- |
| date-cell | 自定义日期单元格内容 |
| header | 自定义日历头部 |
| footer | 自定义日历底部 |

## 贡献

欢迎提交问题和功能请求。

## 许可证

[MIT](LICENSE)