el-calendar
element-ui style calendar widget, typescript friendly
Live Demo
https://mrhanson.github.io/el-calendar/
Install
# npm
npm i @mrhanson/el-calendar
# yarn
yarn add @mrhanson/el-calendar
Changelog
Usage
<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>
Props
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 |
''`
Events
Name | Params | Description |
---|---|---|
premonth | emit when vision moves to previous month | |
nextmonth | emit when vision moves to next month | |
preyear | emit when vision moves to previous year | |
nextyear | emit when vision moves to next year |
Methods
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 |
Slots
name | Description |
---|---|
comment | Used to add some comment under calendar |