element-ui style calendar widget, typescript friendly
https://mrhanson.github.io/el-calendar/
# npm
npm i @mrhanson/el-calendar
# yarn
yarn add @mrhanson/el-calendar
<template>
<Calendar ref="calendar" v-model="selectedDate"></Calendar>
</template>
<script>
import Calendar from '@mrhanson/el-calendar'
export default {
components: { Calendar }
data() {
return {
selectedDate: new Date()
}
}
}
</script>
Name |
Type |
Default |
Options |
Description |
value/v-model |
Date |
new Date() |
-- |
Selected Date value |
today |
Date |
new Date() |
-- |
Used to set server time |
locale |
string |
'cn' |
'cn' ,'en' |
i18n |
dotArr |
Array |
[] |
|
show dot under date or not, Notice:length of dotArr must be same as max date of current month |
Name |
Params |
Description |
premonth |
year, month |
emit when vision moves to previous month |
nextmonth |
year, month |
emit when vision moves to next month |
preyear |
year, month |
emit when vision moves to previous year |
nextyear |
year, month |
emit when vision moves to next year |
Methods |
Params |
Description |
backToToday() |
|
set value & vision back to today |
toPreMonth() |
|
set vision to previous month |
toNextMonth() |
|
set vision to previous month |
toSpecificDate(year, month, date) |
year: number , month: number , date: number |
set value & vision to specific date |
name |
Description |
comment |
Used to add some comment under calendar |