vue-calendar-flat
vue-calendar-flat
A flat style calendar component for vue,base on typescript.
Getting Started
npm install vue-calendar-flat
or
yarn add vue-calendar-flat
Reference in main.js/ts
import Calendar from 'vue-calendar-flat'
Vue.use(Calendar)
Load on demand
<template>
<div id="app">
<Calendar :dateNote="dateNote"
end="2020-2"
:limit="3"
@exceed="exceed"
:todayHighLight='true'
:readOnly="false"
v-model="chose"></Calendar>
<!-- <CalendarDayConcise :day="{
year: 2019,
month: 4,
day: 3,
disable:true
}"></CalendarDayConcise> -->
<div>已选:</div>
<div v-for="(item,index) in chose" :key="index">{{item.year}}-{{item.month}}-{{item.day}}</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { Calendar, CalendarDayConcise } from 'vue-calendar-flat'
@Component({
components: {
Calendar,
CalendarDayConcise
}
})
export default class App extends Vue {
chose: {
year:number;
month:number;
day:number;
}[] = [{
year: 2019,
month: 4,
day: 3
}]
dateNote:{}={
20190401: '自定义',
20190419: '自定义'
}
click (e: any) {
console.log(e)
}
exceed () {
console.log('====================================')
console.log('exceed')
alert('超过数量')
console.log('====================================')
}
change (date: any) {
console.log('====================================')
console.log(date)
console.log('====================================')
}
}
</script>
Props
Calendar
attr | type | options | default | required | note |
---|---|---|---|---|---|
themeColor | string | --- | #57D089 | false | 主题色 |
fontColor | string | --- | #606266 | false | 字体颜色 |
disabledLine | boolean | --- | false | false | 不可点击时横线划掉 |
readOnly | string | --- | false | false | 只读 |
limit | number | --- | 1 | false | 选择数量限制 |
dateNote | { [key: number]: string } |
--- | --- | false | 某个日期的备注 |
disableDate | number:[] | --- | --- | false | 可选日期,如果不给或者为[],则默认都可以选 |
noteColor | string | --- | #606266 | false | 备注颜色 |
value | { year: number; month: number; day: number; }[] |
--- | --- | true | 已选日期 |
start | string | --- | ${yearCurrent}-${monthCurrent}-${dayCurrent} |
false | 开始日期 |
end | string | --- | 9999-12-31 | false | 结束日期 |
CalendarDayConcise
attr | type | options | default | required | note |
---|---|---|---|---|---|
themeColor | string | --- | #57D089 | false | 主题色 |
fontColor | string | --- | #606266 | false | 字体颜色 |
noteColor | string | --- | #606266 | false | 备注颜色 |
disabledLine | boolean | --- | false | false | 不可点击时横线划掉 |
active | boolean | --- | false | false | 是否激活 |
todayHighLight | boolean | --- | true | false | 是否高亮 今天 |
day | { year:number; month:number; day: number; disable: boolean; note?: string; isToday?: boolean; } |
--- | --- | true | 日期信息 |
Dependencies
@types/chai: ^4.1.0@types/mocha: ^5.2.4@vue/cli-plugin-babel: ^3.6.0@vue/cli-plugin-eslint: ^3.6.0@vue/cli-plugin-typescript: ^3.6.0@vue/cli-plugin-unit-mocha: ^3.6.0@vue/cli-service: ^3.6.0@vue/eslint-config-standard: ^4.0.0@vue/eslint-config-typescript: ^4.0.0@vue/test-utils: 1.0.0-beta.29babel-eslint: ^10.0.1chai: ^4.1.2eslint: ^5.16.0eslint-plugin-vue: ^5.0.0node-sass: ^4.9.0sass-loader: ^7.1.0ts-node: ^8.1.0typescript: ^3.4.3vconsole: ^3.3.0vue-calendar-flat: ^0.2.4vue-template-compiler: ^2.5.21