更新记录

1.1.2(2024-06-19) 下载此版本

修复了Vue2版本下,价格日历参数类型报错问题。

1.1.1(2024-06-19) 下载此版本

`

import { reactive } from 'vue' import flCalendar from '@/components/calendar.vue' // 一些开放的设置 const opts = reactive({ dayHeight: '100rpx',//每日日期容器的高度 scrollHeight: '',//滚动容器的高度 optionsBtn: ['入住', '离店'],//入住离店的文字,可以自己改 daySize: '22rpx',//日期的字体大小 rangeSize: '18rpx',//入住离店文字字体大小 yearMonthSize: '28rpx',//年月的字体大小 background: '#fff',//整个组件的背景色 yearMonthColor: '#333',//年月的字体颜色 activeKeySize: '20rpx',//如果你传入了activeArray,即价格日历,可控制显示的字体大小 activeKeyColor: 'red',//如果你传入了activeArray,即价格日历,可控制显示的字体颜色 festival: [{ //节日,通过日期匹配显示 date: '05-01', title: "劳动节" } ] }) // 入住 离店 时间 传入时间分隔符可以是-也可以是/,会自动转成/(IOS兼容问题) const range = reactive({ start: '2024-06-01', end: '2024-06-07' }) // 类似 价格日历的需求 id不是必须 const activeArray = reactive([{ date: '2024-06-20', price: '¥2000', id: '20A' }, { date: '2024-06-21', price: '¥1800', id: '21B' }]) // 确认回调 const confirm = (e:any)=>{ console.log('所选值',e) } //取消回调 const cancel = ()=>{ //cancel callback }

//参数说明 limit:渲染多少个月份,默认3个月 activeArray:价格日历,date是固定的,其余不是 activeKey:例:你传入了价格日历activeArray,你要展示price字段的值,那么就写price range:默认的入住离店时间 opts:暴露的一些样式配置 maxRange:最大可选范围,比如最多选30天,传入30,默认也是30

//返回的数据大概长这样的

dayNums:3 start:{ date: "2024-07-01", dateIOS: "2024/07/01", day: 1, festival: "建党节", month: 7, shortDate: "07-01", shortDateIOS: "07/01", time: "00:00", timeStamp: 00, week: 1, weekCN: "周一", year: 2024 }, end:{ date: "2024-07-03", dateIOS: "2024/07/03", day: 3, festival: "", month: 7, shortDate: "07-03", shortDateIOS: "07/03", time: "00:00", timeStamp: 00, week: 3, weekCN: "周三", year: 2024 }

1.1.0(2024-06-19) 下载此版本

基于Vue3,使用options语法重构 只提供裸日历,不再提供弹窗类动画。 1.暴露部分opts配置,提供部分样式修改 2.新增header与footer插槽,基于头尾样式新增或修改 3.新增自定义节日 4.新增类似价格日历功能 5.可选当天入住离店,别问为啥,问就是项目需求

查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 4.0 × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × ×
<template>
    <view>
        <fl-calendar :range="range" :opts="opts" start-date="2024-06-18" :activeArray="activeArray" @confirm="confirm" @cancel="cancel">
            <template v-slot:header>
                <view class="header">it's' Header!</view>
            </template>
            <template v-slot:footer>
                <view class="footer">it's Footer!</view>
            </template>
        </fl-calendar>
    </view>
</template>
<script setup lang="ts">
    import { reactive } from 'vue'
    import flCalendar from '@/components/fl-calendar.vue'
    // 一些开放的设置
    const opts = reactive({
        dayHeight: '100rpx',//每日日期容器的高度
        scrollHeight: '',//滚动容器的高度
        optionsBtn: ['入住', '离店'],//入住离店的文字,可以自己改
        daySize: '22rpx',//日期的字体大小
        rangeSize: '18rpx',//入住离店文字字体大小
        yearMonthSize: '28rpx',//年月的字体大小
        background: '#fff',//整个组件的背景色
        yearMonthColor: '#333',//年月的字体颜色
        activeKeySize: '20rpx',//如果你传入了activeArray,即价格日历,可控制显示的字体大小
        activeKeyColor: 'red',//如果你传入了activeArray,即价格日历,可控制显示的字体颜色
        festival: [{        //节日,通过日期匹配显示
            date: '05-01',
            title: "劳动节"
        }
        ]
    })
    // 入住  离店 时间  传入时间分隔符可以是-也可以是/,会自动转成/(IOS兼容问题)
    const range = reactive({
        start: '2024-06-01',
        end: '2024-06-07'
    })
    // 类似  价格日历的需求  id不是必须
    const activeArray = reactive([{
        date: '2024-06-20',
        price: '¥2000',
        id: '20A'
    }, {
        date: '2024-06-21',
        price: '¥1800',
        id: '21B'
    }])
    // 确认回调
    const confirm = (e:any)=>{
        console.log('所选值',e)
    //  e = {
    //  dayNums: 3
    //   start: {
    //      date: "2024-07-01",
    //      dateIOS: "2024/07/01",
    //      day: 1,
    //      festival: "建党节",
    //      month: 7,
    //      shortDate: "07-01",
    //      shortDateIOS: "07/01",
    //      time: "00:00",
    //      timeStamp: 1719763200000,
    //      week: 1,
    //      weekCN: "周一",
    //      year: 2024
    //  },
    //  end: {
    //      date: "2024-07-03",
    //      dateIOS: "2024/07/03",
    //      day: 3,
    //      festival: "",
    //      month: 7,
    //      shortDate: "07-03",
    //      shortDateIOS: "07/03",
    //      time: "00:00",
    //      timeStamp: 1719936000000,
    //      week: 3,
    //      weekCN: "周三",
    //      year: 2024
    //  }
    // }
        }
    //取消回调
    const cancel = ()=>{
        //cancel callback
    }
</script>
参数 说明
limit 渲染多少个月份,默认3个月
activeArray 价格日历,date是固定的,其余不是
activeKey 例:你传入了价格日历activeArray,你要展示price字段的值,那么就写price
range 默认的入住离店时间
opts 暴露的一些样式配置,见名识意吧,详见代码块
maxRange 最大可选范围,比如最多选30天,传入30,默认也是30

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问