CalendarView-DEMO

---

<fv-CalendarView></fv-CalendarView>

CalendarView Multiple Choose

---

<fv-CalendarView multiple="multiple" lang="global"></fv-CalendarView>

CalendarView Init Day

---

<fv-CalendarView :value="value" multiple="multiple" lang="global"></fv-CalendarView>

CalendarView Range Choose

---

<fv-CalendarView multiple="range"></fv-CalendarView>

export default {
    data () {
        return {
            currentChoosen: []
        }
    },
    mounted () {
        let year = new Date().getFullYear();
        let month = new Date().getMonth();
        let day = new Date().getDate();
        for (let i = 0; i < 10; i++) {
            this.currentChoosen.push({
                year: year,
                month: month,
                no: day + i
            });
        }
    }
}

CalendarView Dark Theme

---

<fv-CalendarView theme="dark"></fv-CalendarView>

CalendarView Custom Theme

---

Custom Selected Color

<fv-CalendarView theme="dark" foreground="rgba(0, 204, 153, 1)"></fv-CalendarView>

Propoties

---

属性(attr)	类型(type)	必填(required)	默认值(default)	说明(statement)
value	[date]	No	CurrentDate
start	Number	No	1900	Minium Year.
end	Number	No	3000	Maxium Year.
multiple	['single','multiple','range']	No	single
lan	['en','zh']	No	en	CalendarView language.
choosenDates	Array	No	[]	CalendarView初始选中日期
foreground	[string(color)]	No	N/A	CalendarView主题前景色
theme	String	No	system	主题样式, 包含light, dark, system, custom几种样式

Events

---

事件名(Name)	参数类型(args)	说明(statement)
choose-year	string	选择年份后返回年份
choose-month	string	选择月份后返回月份
choose-date	date	选择日期后返回日期
choosen-dates	array	选择多个日期后返回日期数组, 类型为[{year,month,no}]
choosen-dates-obj	array	返回[Date]类型的数组

Slot

---

1. Statement

CalendarView的显式栏描述内容

• value: 原文描述内容
• dayRange: 当前日期数据对象

<template v-slot:statement="x">
    <p></p>
</template>

2. Weekday Content

日期上方星期栏描述内容

• value: 默认星期描述内容

<template v-slot:weekday_content>
    <p></p>
</template>

Appendix

---

1. 重置日期视图

this.$refs.calendarView.resetDate();