vue-calendar-easy
0.2.6 • Public • Published vue-calendar-easy
install
npm install vue-calendar-easy --save
Usage
<template>
<vue-calendar v-model="value" />
</template>
<script>
import VueCalendar from 'vue-calendar-easy'
export default {
components: {
VueCalendar
},
data () {
return {
value: null
}
}
}
</script>
Options
Props
Props |
Type |
Default |
Description |
value |
Date |
null |
Default selected date |
daterange |
Boolean |
null |
Optional date range |
begin_date.sync |
Date |
null |
When :daterange="true" is true, default start date |
end_date.sync |
Date |
null |
When :daterange="true" is true, default end date |
lazy |
Boolean |
true |
When :daterange="true" is true, allow lazy loading |
one_calendar |
Boolean |
false |
When :daterange="true" is true, display a single calendar |
separator |
String |
~ |
Separator symbol |
defaultNextMonth |
Boolean |
true |
In multi-calendar mode, true shows the current month and next month, false shows last month and current month |
picker |
String |
date |
Calendar type, "date" / "month" / "year" |
years |
Number |
20 |
Year range |
year_start |
Number |
2000 |
Start year |
rules |
Array< String > |
[] |
Built-in filtering method, optional value please see below. |
custom_filter |
Function |
- |
Please see below. |
mark_today |
Boolean |
true |
Mark today |
calendar_width |
String |
'300px' |
Calendar width |
calendar_height |
String |
'250px' |
Calenfar height |
header_height |
String |
'40px' |
Header height |
no_border |
Boolean |
false |
Display border |
format |
String |
yyyy-MM-dd |
Get formatted value |
function custom_filter (date, type, index) {
return Boolean
}
const rules = [
'fromToday',
'fromTomorrow',
'untilToday',
'untilTomorrow',
'unableSun',
'unableMon',
'unableTues',
'unableWed',
'unableThur',
'unableFri',
'unableSat'
]
event
event |
Description |
Callback Arguments |
complete |
Callback when the date changes |
date(type: object) / date_range(type: object), format_date(type: string) |
slot
slot |
Description |
Slot variables |
default |
Custom Calendar |
in_range< Boolean >, year < Number >, month < Number >, day < Number > |
month |
Custom Month Calendar |
year < Number >, month < Number > |
year |
Custom Year Calendar |
year < Number > |
Package Sidebar
Install
Weekly Downloads