更新记录

1.0.3（2024-03-25） 下载此版本

1.0.3-可设置最大连选天数，绑定事件dateRangeMaxDeal

1.0.2（2024-02-27） 下载此版本

2024-2-27：日期范围选择时支持显示打点信息

1.0.1（2023-09-28） 下载此版本

1.0.1：日历-支持左右滑动切换、单选日期、选择日期范围、打点

平台兼容性

日历：支持单日期、日期范围选择，使用swiper实现左右滑动切换月份

组件写的比较简单，代码有些许冗杂，有需要改进的地方或是使用不便可以直接在组件上改动或者写在评论区，会考虑进行修改

使用方法

<view>
    <miku-calendar
          :calendarBg="'#fff'"
          :dateRange="[new Date('2024/02/01').getTime(),new Date('2024/02/27').getTime()]"
          :dateRangeMax="7"
          @dateRangeMaxDeal="dateRangeMaxDeal"
          :selected="[{date: '2023/12/25', info: '签到', type: 'dot',color:'rgb(255,112,67)'},
            {date: '2024/01/25', info: '签到', type: 'dot',color:'rgb(255,112,67)'},{date: '2024/01/26', info: '签到', type: 'dot',color:'rgb(255,112,67)'}
            ,{date: '2024/01/27', info: '签到', type: 'text',color:'rgb(255,112,67)'},{date: '2024/02/01', info: '签到', type: 'dot',color:'rgb(245,108,108)'}
            ,{date: '2024/02/02', info: '签到', type: 'text',color:'rgb(245,108,108)'},{date: '2024/02/26', info: '签到', type: 'text',color:'rgb(245,108,108)'}
            ,{date: '2024/02/27', info: '签到', type: 'dot',color:'rgb(245,108,108)'},{date: '2024/02/28', info: '签到', type: 'dot',color:'rgb(245,108,108)'}
            ,{date: '2024/03/01', info: '签到', type: 'dot',color:'rgb(255,112,67)'},{date: '2024/03/02', info: '签到', type: 'text',color:'rgb(245,108,108)'}
            ,{date: '2024-03-20', info: '签到', type: 'dot',color:'rgb(255,112,67)'},{date: '2024-03-21', info: '签到', type: 'text',color:'rgb(245,108,108)'}]"
          mode='dateRange'
          :showArrow="true"
          themeColor="rgb(100,124,203)"
          arrowColor="rgb(100,124,203)"
          @confirm = "calendarConfirm"
      ></miku-calendar>
    <miku-calendar
        :calendarBg="'#eee'"
        :date="date"
        :selected="[{date: '2022-11-27', info: '签到', type: 'dot',color:'red'},
            {date: '2022-11-24', info: '签到', type: 'text',color:'red'},{date: '2023-09-21', info: '签到', type: 'text',color:'blue'}
            ,{date: '2023-09-20', info: '签到', type: 'dot',color:'red'},{date: '2023-09-27', info: '签到', type: 'text',color:'blue'}]"
        mode='date'
        :showArrow="true"
        themeColor="rgb(100,124,203)"
        arrowColor="rgb(100,124,203)"
        @confirm = "calendarConfirm"
        @dateChange = "dateChange"
    ></miku-calendar>
</view>

import mikuCalendar from "../../components/miku-calendar/mikuCalendar.vue"
export default {
    components:{
        mikuCalendar
    },
    data() {
        return {
            date: new Date('2023/09/20').getTime()
        }
    },
    methods: {
        calendarConfirm(e){
            console.log(e)
        },
        dateRangeMaxDeal(e){
            console.log('超过最大连选天数：',e)
        },
        dateChange(day){
            this.date = day
        }
    }
}

props