更新记录

1.0.5（2019-11-11） 下载此版本

修复mask改变时，日期没有渲染的问题

1.0.4（2019-11-07） 下载此版本

更新部分样式

1.0.3（2019-09-05） 下载此版本

指定日期时，日历缺少天数的问题

平台兼容性

通用日历，可标记，选择范围，高度自定义

组件名：Li-Calendar。

1.通用日历,h5,5+app,微信小程序测试通过, 大部分内容可以自定义

2.可标记，设置任意标记内容和显示右上角点

3.选择范围，选择指定日期范围或者设置日期范围

4.限制日历显示范围，设置日期的上下限

5.显示农历，可以选择关闭，设置了标记点的优先显示标记点。

点击此处，在线演示

使用方式：

在 script 中引用组件

import Calendar from '@/components/Li-Calendar/Li-Calendar.vue';
export default {
    components: {Calendar}
}

在 template 中使用组件

        <view class="Mtext">----默认---</view>

        <Calendar :currentTime='currentTime' @dayChange='dayChange' @monthChange='monthChange'
        :rangeMode='rangeMode' @rangeChange='rangeChange' :showLunar='false'>
        </Calendar> 

        <view class="Mtext">显示农历和标记点</view>

        <Calendar :currentTime='currentTime' :mark='mark' @dayChange='dayChange' @monthChange='monthChange' :rangeMode='rangeMode'
         :range='range' @rangeChange='rangeChange' :dateStart='dateStart' :dateEnd='dateEnd' :canDrag='true'>
        </Calendar>

        export default {
            components: {
                Calendar
            },
            data() {
                return {
                    mark: [
                        {
                            time: '2019-8-23',
                            text: '标记',
                            markPoint: true,
                            markTextColor:'blue',
                            pointText: '奖',
                            pointTextColor:'red'
                        },
                        {
                        time: '2019-8-24',
                        text: '上山打老虎',
                        markPoint: true,
                        pointText: '2',
                    }],
                    range:{
                        rangeStart:undefined,   //设置标记范围开始，yyyyMM-dd
                        rangeEnd:undefined      //设置标记范围结束，yyyyMM-dd
                    },
                    rangeMode:false,
                    currentTime: '2019-8-23',
                    title: 'Hello',
                    dateStart: '2019-6-15',
                    dateEnd: '2020-6-15'
                }
            },
            onLoad() {

            },
            methods: {
                dayChange(data){
                    console.log(data)
                },
                monthChange(data){
                    console.log(data)
                },
                setDate(){
                    this.currentTime = '2019-7-10'
                },
                setRange(){
                    this.range = {
                        rangeStart:'2019-8-10', //设置标记范围开始，yyyyMM-dd
                        rangeEnd:'2019-8-20'    //设置标记范围结束，yyyyMM-dd
                    }
                },
                setRangeMode(){
                    this.rangeMode = !this.rangeMode;
                },
                rangeChange(data){
                    console.log(data)
                }
            }
        }

属性说明：

mark 标记点列表 属性说明：

range 设置范围 属性说明：

事件说明：