icalender

一个可以标记日期范围的vue日历插件

预览

预览图	说明
	没有标记：marks = []
	标记一个日期：marks = [{start: "2019-09-10", end: "2019-09-10"}]
	标记一个日期范围： marks = [{start: "2019-09-13", end: "2019-09-15"}]
	混合标记：marks = [{start: "2019-09-10", end: "2019-09-10"}, {start: "2019-09-13", end: "2019-09-15"}]
	跨月标记 ：marks = [{start: "2019-09-10", end: "2019-09-10"}, {start: "2019-09-13", end: "2019-09-15"}, {start: "2019-09-28", end: "2019-10-03"}]

使用

npm install icalender --save

全局注册组件

import icalender from 'icalender';

Vue.use(icalender);

组件内使用

CommonJS

var icalender = require('icalender');

new Vue({
    components: { icalender },
    data: function () {
        return {
            marks: [
                {
                    start: "2019-09-10",
                    end: "2019-09-10"
                },
                {
                    start: "2019-09-13",
                    end: "2019-09-15"
                },
                {
                    start: "2019-09-28",
                    end: "2019-10-03"
                }
            ]
        };
    },
    template: '<icalender :marks="marks" />'
});

ES6

import icalender from 'icalender';

new Vue({
    components: { icalender },
    data: function () {
        return {
            marks: [
                {
                    start: "2019-09-10",
                    end: "2019-09-10"
                },
                {
                    start: "2019-09-13",
                    end: "2019-09-15"
                },
                {
                    start: "2019-09-28",
                    end: "2019-10-03"
                }
            ]
        };
    },
    template: '<icalender :marks="marks" />'
});

API

Props

属性	说明	类型	默认值
marks	可选，标记日期范围的数组,数组成员里必须包含start和end两个对象属性，例如 [{start: "2019-09-13, end: "2019-09-15"}]	Array	[]

Events

事件名	说明	返回值
on-click	点击日期时触发	返回当前日期的属性
forward	点击向前翻动日历触发	返回当前年份和月份
back	点击向后翻动日历触发	返回当前年份和月份

License

MIT