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 // Default selected date
    }
  }
}
</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 |

/*
 * @param date  日期
 * @param type  日历类型 [date, month, year]
 * @param index 索引 (默认为0，当 daterange 时为 0 或 1)
 */
function custom_filter (date, type, index) {
  // 返回 true 则禁用
  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 > |