1.1.1 • Published 4 years ago
foliday-calendar v1.1.1
Vue Calendar
Installation
npm install --save foliday-calendar
//main.js
import FolidayCalendar from 'foliday-calendar'
Vue.use(FolidayCalendar)
But you can also import the standalone component to add locally or for more complex installations.
// foo.vue
import { FolidayCalendar } from 'foliday-calendar'
export default {
components: {
FolidayCalendar,
},
}
Basic Usage
<calendar
ref="calendar1"
:events="calendar1.events"
:lunar="calendar1.lunar"
:value="calendar1.value"
:begin="calendar1.begin"
:end="calendar1.end"
:weeks="calendar1.weeks"
:months="calendar1.months"
showOtherMonth
canChoice
@select="calendar1.select"
@selectMonth="calendar1.selectMonth"
@selectYear="calendar1.selectYear">
</calendar>
...
<script>
...
data() {
return {
calendar1:{
value:[2017,7,20], //默认日期
// lunar:true, //显示农历
weeks:['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
months:['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
events:{
'2017-7-7':'$408',
'2017-7-20':'$408',
'2017-7-21':'$460',
'2017-7-22':'$500',
},
select(value){
console.log(value.toString());
},
selectMonth(month,year){
console.log(year,month)
},
selectYear(year){
console.log(year)
},
timestamp:Date.now()
},
}
}
...
</script>
props
参数 | 值类型 | 默认值 | 说明 |
---|---|---|---|
showOtherMonth | Boolean | false | 是否显示其他月份日期 |
canChoice | Boolean | false | 是否可选 |
multi | Boolean | false | 是否多选 |
range | Boolean | false | 是否范围模式 |
value | Arrary | [] | 默认日期 |
begin | Arrary | [] | 开始选择日期 |
end | Arrary | [] | 结束选择日期 |
lunar | Boolean | [] | 是否显示农历 |
weeks | Arrary | '日', '一', '二', '三', '四', '五', '六' | 自定义星期名称 |
months | Arrary | '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' | 自定义月份 |