Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ljcheibao/vue-component-weekcalender
typescript+vue开发的日历组件，使用swiper库来支持日历滑动功能，简单易用
https://github.com/ljcheibao/vue-component-weekcalender
calender component frontend javascript typescript vue
Last synced: 6 days ago
JSON representation
typescript+vue开发的日历组件，使用swiper库来支持日历滑动功能，简单易用
- Host: GitHub
- URL: https://github.com/ljcheibao/vue-component-weekcalender
- Owner: ljcheibao
- License: mit
- Created: 2018-07-31T01:37:20.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-05-05T14:50:23.000Z (over 5 years ago)
- Last Synced: 2024-11-03T02:02:55.105Z (13 days ago)
- Topics: calender, component, frontend, javascript, typescript, vue
- Language: Vue
- Size: 250 KB
- Stars: 8
- Watchers: 3
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
### 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 | [] |
- calender events
| 方法名称 | 说明 | 参数 |
| -------- | -------- | ---------------------------------------- |
| on-click | 日历上某一天触发 | 当前日期对象，对象有以下属性：
currentDate：选中的日期，格式：yyyy-MM-dd，
dayClass：类名称，
dayDesc/day：几号，如：2，
enabled：是否可以点击，true表示可以点击 |
| on-slide | 左右滑动日历触发 | 返回滑动到的下一个日历的第一天日期，格式：yyyy-MM-dd格式 |
### 组件开发说明
- 安装依赖
```
npm/cnpm install
```
- 编译
```
npm run build
```
- demo运行
```
# cd test
# npm/cnpm install
# npm run build
#把test目录的index.html在浏览器打开，切换到移动的端模拟器，可以预览在手机端的展示结果
```
### 备注
**相互学习共同提高，欢迎使用并且issue**