vm-calendar

这是一个基于vue 2.X的日历组件

预览

目前功能:

1、显示所有月份或者单月

2、全局设定每天的描述，也可单独设置

3、暂只支持头部插槽

4、支持单选或多选

快速开始

第一步:

npm install vm-calendar --save

第二步，在你的vue页面里

<script>
import VmCalendar from "vm-calendar";

export default {
    components: {
        VmCalendar
    }
}
</script>

第三步，加载模板:

<vm-calendar 
    :labels="labels"
    :config="config"
    @change="calendarChange"
    @cancel="calendarCancel"
    @confirm="calendarConfirm"
/>

props参数

| 参数名称 | 类型 | 默认值 |说明 | | --------------------- | ------- | ------------------- | ------------------------------------------------------------------------------- | | labels | object | | | | labels.year | string | 年 | | | labels.month | string | 月 | | | labels.confirm | string | 确认 | | | labels.cancel | string | 取消 | | | labels.title | string | 选择日期 | | | labels.weeks | array | ['日','一','二','三','四','五','六'] | | | config | object | | | | config.spread | boolean | true | 是否显示所有月份 | | config.fill | boolean | false | 每月是否填充完整 | | config.multipleSelect | boolean | false | 是否多选 | | config.headerFixed | boolean | true | 头部固定定位 | | config.startYearMonth | string | 当前年月 | 开始日期 支持 yyyy-MM 、yyyy/MM、 yyyy,MM | | config.endYearMonth | string | 当前年月加一年 | 结束日期 支持 yyyy-MM 、yyyy/MM、 yyyy,MM | |config.defaultYearMonth| string | 当前年月 | 默认日期 支持 yyyy-MM 、yyyy/MM、 yyyy,MM | | config.customDays | array | [] | 自定义日期 { year: 2018,month: 8,date: 2,disabled: true,selected: false,desc: '禁用' } | | config.cancelBtnColor | string | #F58400 | 取消按钮颜色 | | config.confirmBtnColor| string | #F58400 | 确认按钮颜色 | | config.globalDesc | string | | 全局desc |

事件

| 名字 | 参数 | 说明 | | ---------------- | ---------------------- | ---------------------------------------------------- | | change | { value } | 选中日期发生改变时触发 | | cancel | | 取消触发 | | confirm | { value } | 确认触发 |

插槽

| 名字 | 参数 | 说明 | | -------------------- | ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | header | slot-scope="{header}" | 用来替换头部区域 |

demo

<template>
    <div class="panel-calendar">
        <vm-calendar 
            :labels="labels"
            :config="config"
            @change="calendarChange"
            @confirm="getSelectDate"
        />
    </div>
</template>

<script>
    import VmCalendar from "vm-calendar"
    export default {
        components: {
            VmCalendar
        },
        mixins: [],
        data (){
            return {
                labels:{
                    weeks: ['周日','周一','周二','周三','周四','周五','周六']
                },
                config:{
                    startYearMonth: '2019/02',
                    endYearMonth: '2018,07',
                    spread: true,
                    fill: false,
                    multipleSelect: true,
                    customDays: [
                        {
                            year: 2018,
                            month: 8,
                            date: 1,
                            disabled: true,
                            desc: '<span style="color:blue;">啊</span><span style="color:red;">哈</span>'
                        },
                        {
                            year: 2018,
                            month: 8,
                            date: 2,
                            disabled: true,
                            desc: '禁用'
                        },
                        {
                            year: 2018,
                            month: 8,
                            date: 31,
                            disabled: true,
                            desc: '哈哈'
                        }
                    ]
                }
            }
        },
        methods: {
            calendarChange(value){
                console.log(value)
            },
            getSelectDate(value){
                console.log(value)
            }
        }
    }
</script>

<style>
</style>

License

[MIT]