bm-horizontal-calendar

基于HorizontalCalendar插件魔改, 适应本末公司安招采项目需要的横向日历组件, 应用场景: 需要对计划日期进行管理并且日期的跨度大于10日, 本插件需要配合正确格式的数据以及element-ui和less才能使用

原插件名称vue-horizontal-calendar 地址click here

安装

npm install bm-horizontal-calendar -s

import

import BmHorizontalCalendar from 'bm-horizontal-calendar'

示例

<template>
    <div>
        <bm-horizontal-calendar v-model="data"
                                :disabled="disabled">
        </bm-horizontal-calendar>
    </div>
</template>

<script>
export default {
    data () {
        return {
            data: [
                {
                    "id": "1386513773345390594",
                    "title": "发公告",
                    "timeFormat": "2021/04/29",
                    "timestamp": 1619625600000
                },
                {
                    "id": "1386513773345390595",
                    "title": "公告截止",
                    "timeFormat": "2021/05/04",
                    "timestamp": 1620057600000
                },
                {
                    "id": "1386513773408305153",
                    "title": "公示开始",
                    "timeFormat": "2021/05/10",
                    "timestamp": 1620576000000
                },
                {
                    "id": "1386513773416693761",
                    "title": "公示截止",
                    "timeFormat": "2021/05/12",
                    "timestamp": 1620748800000
                },
                {
                    "id": "1386513773345390596",
                    "title": "投标截止",
                    "timeFormat": "2021/05/05",
                    "timestamp": 1620144000000
                },
                {
                    "id": "1386513773345390597",
                    "title": "开标",
                    "timeFormat": "2021/05/07",
                    "timestamp": 1620316800000
                }
            ],
            disabled: false
        }
    }
}
</script>

参数注解

data: 计划数组, 使用双向数据绑定, 里面包含了日历的所有计划的日期，数组的每一行会被遍历并加到日历当中去， 每点击一个日历的日期， 如果发现数组中包含相同日期即视为有计划， 会将计划以el-popover的形式展现在日期的上方, 对计划的任何编辑都会修改data数组

choosedDate: 初次加载默认选中的日期, 默认参数为当天

swipeSpace: 点击左右箭头，切换的日期间隔天数, 默认参数为7日

choosedDatePos: 当前默认选中的日期所处的位置，'left，center'，'right'，默认参数为'left'

minDate: 最小日期，可接收格式如 ‘2019/12/01’ 或 ‘2019-12-01’ 或 标准UTC格式时间

maxDate: 最大日期，可接收格式如 ‘2019/12/01’ 或 ‘2019-12-01’ 或 标准UTC格式时间

choosedItemColor: 选中的日期背景色

todayItemColor: "今天"未选中时的背景色

sundayText: 星期天的中文字，默认"日"，可自定义，如"天"

showBorderTop: 是否显示日历组件的顶部边框

resizeable: 屏幕尺寸改变时，是否重绘日历组件

lang: 语言 可选值：zh(中文)，en(英文)

disabled: 是否禁用当前日历组件的计划功能

License

MIT © 2020-present, sjq