### vue 日历(以周为单位)组件
typescript+vue开发的日历组件，使用swiper库来支持日历滑动功能，简单易用
[](LICENSE)
[](https://www.npmjs.com/package/vue-component-weekcalender)
[](https://www.npmjs.com/package/vue-component-weekcalender)
#### 代码示例
- 安装组件包
```
npm install vue-component-weekcalender --save-dev
```
- js代码(**没有自定义(reset=false的情况)日期状态的实例**)
```js
import Vue from 'vue';
import VueWeekcalender from "vue-component-weekcalender";
new Vue({
el: '#app',
components: {
VueWeekcalender
},
data() {
return {
options: {
showHeader: true,
beginDate: "2018-07-30",
endDate: "2018-08-12",
currentDate: "2018-08-03"
}
}
},
methods: {
chooseDayItemHandle: function (dayItem) {
console.log(dayItem)
},
slideChangeHandle:function(item) {
console.log(item);
}
}
});
```
- html模板
```html
```
- 自定义日期每天状态的实例(**reset=true的情况**)
```js
import "./index.less";
import Vue from 'vue';
import VueWeekcalender from "vue-component-weekcalender";
new Vue({
el: '#app',
components: {
VueWeekcalender
},
data() {
return {
options: {
showHeader: true,
beginDate: "2018-07-01",
endDate: "2018-09-16",
currentDate: "2018-08-04"
},
reset: true,
dayStatus: [{
currentDate: "2018-08-13",
dayClass: "day enabled",
enabled: true,
default: true
}, {
currentDate: "2018-08-14",
dayClass: "day enabled",
enabled: true,
default: false
}]
}
},
methods: {
changeStatus:function() {
this.dayStatus= [{
currentDate: "2018-08-04",
dayClass: "day enabled",
enabled: true,
default: true
}, {
currentDate: "2018-08-14",
dayClass: "day enabled",
enabled: true,
default: false
}]
},
chooseDayItemHandle: function (dayItem) {
console.log(dayItem)
},
slideChangeHandle: function (item) {
console.log(item);
}
}
});
```
- html模板
```html
Document
```
### 组件API
- calender props
| 属性 | 说明 | 类型 | 默认值 |
| ------ | ---------------------------------------- | ------------- | ----- |
| option | option对象提供4个属性值：
showHeader(是否显示标题)，
beginDate(开始时间：yyyy-MM-dd格式)，
endDate(结束时间：yyyy-MM-dd格式)，
currentDate(当前时间：yyyy-MM-dd格式) | object | 空对象 |
| reset | 是否需要重置初始化生成的日历的每天日期，默认值为false，
该值设置为true以后，使用者可设置status属性，来自定义修改生成的日历每天日期状态，原来日历中每一项均不可点，即每一项的
enabled属性会被重置为false | boolean | false |
| status | 需要自定义的日期状态数组(reset属性为true有效)，
数组的每一项是个object对象，对象提供一下几个属性：
currentDate：当前日期格式yyyy-MM-dd
dayClass：当前日期显示的样式名称
enabled：boolean类型，是否可用(可以点击)
default：boolean类型，是否是默认选中的一天，true为默认选中的一天，
需要注意的是，status的数组对象中，仅有一项default的值为true(有多个日期为选中状态，不符合实际需求吧) | Array