更新记录

1.0.0（2025-09-22） 下载此版本

这个 hy-calendar-plus 插件方案为你提供了一个与已有插件不重复、在日程管理、预约系统、任务跟踪等场景中非常实用的日历解决方案。它注重功能的完备性、UI的美观性和使用的灵活性。

它的优势和特点：

• 功能全面：覆盖了日历组件的各类高级需求。
• 视觉美观：精心设计的UI和交互动效。
• 高度可定制：几乎所有视觉和交互都可以自定义。
• 开发体验良好：清晰的API设计和详细的事件回调。
• 声明清晰：明确声明无广告、无数据采集、无权限要求。

平台兼容性

uni-app(3.6.5)

uni-app x(3.6.5)

其他

hy-calendar-plus 增强型日历组件

一个功能丰富、样式美观的 uni-app 日历组件。

特性

• 📅 多种视图: 支持月视图、周视图、日视图切换。
• 🎯 丰富交互: 支持日期选择（单选、多选、范围选择）、日期标记、滑动切换。
• 🎨 高度可定制: 可自定义主题颜色、日期单元格内容、头部样式。
• 🌐 国际化: 支持中英文切换，支持自定义周几开始。
• 📱 多端兼容: 适配 App、H5、各大小程序平台。
• 🔒 无权限依赖: 纯前端UI组件，不涉及任何敏感权限。

安装

通过 HBuilderX 的 uni_modules 导入本插件，或手动将本插件放入你项目的 uni_modules 目录下。

使用方法

基本使用

<template>
  <view>
    <hy-calendar-plus 
      :value="currentDate" 
      :date-marks="dateMarks" 
      @date-select="onDateSelect"
      @day-click="onDayClick"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date(),
      dateMarks: [
        { date: new Date(), color: '#FF5500', text: '活动' },
        { date: new Date(2025, 8, 25), color: '#07C160', text: '会议' }
      ]
    };
  },
  methods: {
    onDateSelect(dates) {
      console.log('选中日期:', dates);
    },
    onDayClick(day) {
      console.log('点击日期:', day);
    }
  }
};
</script>

配置属性 (Props)

属性              类型              默认值      说明
value           Date, String    new Date()   当前日期
view            String         'month'       视图类型: 'month', 'week', 'day'
selectionMode   String         'single'      选择模式: 'single', 'multiple', 'range'
selectedDates   Array, Date    []            已选日期
dateMarks       Array          []            日期标记
showTodayButton Boolean        true          是否显示今天按钮
showViewSwitch  Boolean        true          是否显示视图切换
showDayView     Boolean        true          是否显示日视图
firstDayOfWeek  Number         1             一周的第一天 (0:周日, 1:周一)
locale          String        'zh-CN'        语言: 'zh-CN', 'en-US'
themeColor      String        '#007AFF'      主题颜色
minDate         Date          null           最小日期
maxDate         Date          null           最大日期

事件 (Events)

事件名           说明                  回调参数
@input          当前日期变化时触发      当前日期
@date-select    日期选择时触发         选中的日期数组
@day-click      点击日期时触发      日期对象
@day-longpress  长按日期时触发      日期对象
@view-change    视图切换时触发      视图类型
@prev           点击上一个月/周时触发  新日期
@next           点击下一个月/周时触发  新日期
@today          点击今天按钮时触发     今天日期

方法 (Methods)

通过 ref 调用组件方法。

方法名      说明                参数
goPrev      切换到上一个月/周          -
goNext      切换到下一个月/周          -
goToday     切换到今天              -
switchView  切换视图                  view: 'month', 'week', 'day'

插槽 (Slots)

插槽名          说明         作用域参数
day-content      自定义日期内容    { day, marks }
week-content     自定义周视图内容   { day, marks }
day-events      自定义日视图事件    { date, marks }