A calendar component for vuejs2
npm install vuejs-calendar --save
demo.vue
<template>
<div>
<calendar></calendar>
</div>
</template>
import calendar from 'vuejs-calendar'
export default {
name: 'app',
components: {
calendar
},
...
}
dateChanged(date)
SwitchPreviousMonth(from, to)
SwitchNextMonth(from, to)
debug (default: false)
<template>
<div>
<calendar
v-on:dateChanged="changed"
v-on:SwitchPreviousMonth="pre"
v-on:SwitchNextMonth="next"
v-bind:debug="false"
/>
</div>
</template>
<script>
import calendar from 'vuejs-calendar'
export default {
components: {
calendar
},
methods: {
pre (from, to){
console.group('pre month')
console.log('from',from)
console.log('to',to)
console.groupEnd()
},
next (from, to) {
console.group('next month')
console.log('from',from)
console.log('to',to)
console.groupEnd()
},
changed (to){
console.log('changed to',to)
}
}
}
</script>
- Add custom active date
- support more style
一款vuejs日历组件
npm install vuejs-calendar --save
或
cnpm install vuejs-calendar --save
(淘宝npm镜像)
demo.vue
<template>
<div>
<calendar></calendar>
</div>
</template>
import calendar from 'vuejs-calendar'
export default {
name: 'app',
components: {
calendar
},
...
}
dateChanged(date)
日期改变时触发SwitchPreviousMonth(from, to)
切换到上月时触发SwitchNextMonth(from, to)
切换到下月时触发
debug (default: false)
<template>
<div>
<calendar
v-on:dateChanged="changed"
v-on:SwitchPreviousMonth="pre"
v-on:SwitchNextMonth="next"
v-bind:debug="false"
/>
</div>
</template>
<script>
import calendar from 'vuejs-calendar'
export default {
components: {
calendar
},
methods: {
pre (from, to){
console.group('pre month')
console.log('from',from)
console.log('to',to)
console.groupEnd()
},
next (from, to) {
console.group('next month')
console.log('from',from)
console.log('to',to)
console.groupEnd()
},
changed (to){
console.log('changed to',to)
}
}
}
</script>
- 增加自定义初始日期
- 增加更多样式
- 农历支持