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

全局注册组件

importicalenderfrom'icalender';Vue.use(icalender);

组件内使用

CommonJS

varicalender=require('icalender');newVue({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

importicalenderfrom'icalender';newVue({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