uni-calendar-plugin

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

功能特点

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

安装

# 使用npm
npm install uni-calendar-plugin

# 使用yarn
yarn add uni-calendar-plugin

# 使用pnpm
pnpm add uni-calendar-plugin

使用方法

<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