更新记录

1.0.0（2024-03-22）

-2024-3-22

• 组件需要依赖 sass 插件 ，请自行安装；
• 本组件依赖 uni-app内置组件swiper组件，请与swiper组件配合使用；
• 通过uni_modules引用组件，在页面template中即可直接使用，无需在页面中import和注册components；
• 可设置显示收缩按钮，收缩后只显示一个星期的日期，展开后显示一个月的日期；可以通过触摸屏幕左右滑动切换月份或切换周；
• 可根据需要选择是否显示农历日期，且会显示节日，如春节、端午、国庆、腊八节等；
• 本组件农历转换使用的js是 @1900-2100区间内的公历、农历互转--这个js节日判断有bug--源码修改过已处理
• 支持微信小程序、h5、app，其他的未测试

平台兼容性

日历组件

简单介绍

• 组件需要依赖 sass 插件 ，请自行安装；
• 本组件依赖 uni-app内置组件swiper组件，请与swiper组件配合使用；
• 通过uni_modules引用组件，在页面template中即可直接使用，无需在页面中import和注册components；
• 可设置显示收缩按钮，收缩后只显示一个星期的日期，展开后显示一个月的日期；可以通过触摸屏幕左右滑动切换月份或切换周；
• 可根据需要选择是否显示农历日期，且会显示节日，如春节、端午、国庆、腊八节等；
• 本组件农历转换使用的js是 @1900-2100区间内的公历、农历互转--这个js节日判断有bug--源码修改过已处理
• 支持微信小程序、h5、app，其他的未测试

API

属性说明

注意：

1. 标记日期会在日期下方显示“title”内容，建议“title”内容不超过4个汉字；
2. 农历日期、节日、标记日期，只会显示其一，优先级 标记 > 节日 > 农历日期；
3. showShrink表示是否显示收缩按钮，并不是表示收起或展开状态；

方法说明

方法使用：在组件上添加 ref 属性，在调用对应的方法：this.$refs.calendar.addSignList([]) 即可，详情见下方的基本用法；

事件说明

@dayChange 返回值 dayInfo 说明

@monthChange 返回值 monthInfo 说明

基本用法

在template中使用组件

<view class="content">
    <view class="content-item">
        <view class="title">显示农历、月份背景；收缩显示一周的日期；动态添加和修改标记；左右滑动切换月份；点击左右按钮切换月份</view>
        <fold-calendar
            ref="calendar"
            :showLunar="true"
            :showMonthBg="true"
            :showShrink="true"
            :signList="signList"
            @dayChange="dayChange"
            weekType="星期"
            @monthChange="monthChange"
            @shrinkClick="shrinkClick"
        ></fold-calendar>
        <view class="operation">
            <view class="button" @click="addSign">新增标记</view>
            <view class="button" @click="deleteSign">删除标记</view>
        </view>
    </view>
    <view class="content-item">
        <view class="title">日历收缩；滑动切换月份；隐藏左右切换按钮</view>
        <fold-calendar :showShrink="true" shrinkState="week" :showChangeBtn="false"></fold-calendar>
    </view>
    <view class="content-item">
        <view class="title">默认日历；左右滑动切换月份；左右点击切换月份</view>
        <fold-calendar weekType=""></fold-calendar>
    </view>
    <view class="content-item">
        <view class="title">默认日历；禁止切换月份；隐藏月份背景</view>
        <fold-calendar weekType="" :showChangeBtn="false" :showMonthBg="false" :swiper="false"></fold-calendar>
    </view>
</view>

在script中使用

export default {
  data() {
    return {
      signList: [{date: "2024-06-25",title: "生日",info: "张三生日"},
        {date: "2024-06-19",title: "朋友聚会"}, 
        {date: "2024-07-22",title: "纪念日"}, 
        {date: "2024-04-11",title: "聚会"}, 
        {date: "2024-07-23",title: "郊游"}, 
        {date: "2024-08-19",title: "游玩"}],
    }
  },
  methods: {
    dayChange(dayInfo) { // 点击日期
      console.log("点击日期", JSON.parse(JSON.stringify(dayInfo)));
    },
    monthChange(monthInfo) { // 切换月份
      console.log("切换月份", JSON.parse(JSON.stringify(monthInfo)));
    },
    shrinkClick(type) {
      console.log("当前状态", type);
    },

    addSign() { // 添加标记
        let addList = [{date: "2024-03-22",title: "休息"}, 
        {date: "2024-03-23",title: "上班"}];
        // 调用 addSignList 方法，传入需要添加的标记数组
        this.$refs.calendar.addSignList(addList);
    },
    deleteSign() { // 删除标记
        let deleteList = [{date: "2024-03-23",title: "上班"}];
        // 调用 deleteSignList 方法，传入需要删除的标记数组
        this.$refs.calendar.deleteSignList(deleteList);
    },
  }
}

注意

```
有任何疑问可以  加qq1848961270  备注插件名称
```