Calendar

Demos

Selecting a single date

Click to select a single date by default.

Mon Tue Wed Thu Fri Sat Sun

Selected: Thursday, June 16, 2022

Supports v-model with value type being the native Date.

Edit this demo on GitHubEdit
<template>
<article>
  <veui-calendar v-model="date"/>
  <p>Selected: {{ readableDate }}</p>
</article>
</template>

<script>
import { Calendar } from 'veui'

export default {
  components: {
    'veui-calendar': Calendar
  },
  data () {
    return {
      date: new Date()
    }
  },
  computed: {
    readableDate () {
      return this.date.toLocaleDateString(this.$i18n.locale, {
        weekday: 'long',
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      })
    }
  }
}
</script>

Selecting multiple dates or a date range

You can select multiple date with the multiple prop set to true and can select a date range with the range prop set to true.

Multiple dates

Mon Tue Wed Thu Fri Sat Sun
Selected: Nothing.

Date ranges

Mon Tue Wed Thu Fri Sat Sun
Selected: Nothing.

Supports v-model, with value type being Array<Date> when selecting multiple dates, being [Date, Date] when selecting a date range.

Edit this demo on GitHubEdit
<template>
<article>
  <section class="col">
    <h4>Multiple dates</h4>
    <veui-calendar
      v-model="dates"
      multiple
    />
    <section>Selected: {{ readableDates }}</section>
  </section>
  <section class="col">
    <h4>Date ranges</h4>
    <veui-calendar
      v-model="range"
      range
    />
    <section>Selected: {{ readableRange }}</section>
  </section>
</article>
</template>

<script>
import { Calendar } from 'veui'

export default {
  components: {
    'veui-calendar': Calendar
  },
  data () {
    return {
      dates: null,
      range: null
    }
  },
  computed: {
    readableDates () {
      if (!this.dates || !this.dates.length) {
        return 'Nothing.'
      }
      return this.toReadable(this.dates).join(', ')
    },
    readableRange () {
      if (!this.range) {
        return 'Nothing.'
      }
      return this.toReadable(this.range).join(' to ')
    }
  },
  methods: {
    toReadable (dates) {
      return dates.map(date => date.toLocaleDateString(this.$i18n.locale))
    }
  }
}
</script>

<style lang="less" scoped>
article {
  overflow: hidden;
}

.col {
  float: left;
  width: 340px;
  margin-right: 20px;
}

h4 {
  margin-top: 0;
}
</style>

Selecting multiple date ranges

When multiple and range are both set to true, you can select multiple date ranges. You can configure the number of month panels with the panel prop. The way we merge newly selected ranges into those are already select are that, if you start select on a unselected date, the range will be selected and if start on a selected one, the range will be unselected.

Mon Tue Wed Thu Fri Sat Sun
Mon Tue Wed Thu Fri Sat Sun
Selected: Nothing.

Supports v-model, with value type being Array<[Date, Date]> when selecting multiple date ranges.

Edit this demo on GitHubEdit
<template>
<article>
  <veui-calendar
    v-model="ranges"
    range
    multiple
    :panel="2"
  />
  <section>Selected: {{ readableRanges }}</section>
</article>
</template>

<script>
import { Calendar } from 'veui'

export default {
  components: {
    'veui-calendar': Calendar
  },
  data () {
    return {
      ranges: null
    }
  },
  computed: {
    readableRanges () {
      if (!this.ranges || this.ranges.length === 0) {
        return 'Nothing.'
      }
      return this.ranges
        .map(range => this.toReadable(range).join(' to '))
        .join(', ')
    }
  },
  methods: {
    toReadable (dates) {
      return dates.map(date => date.toLocaleDateString(this.$i18n.locale))
    }
  }
}
</script>

API

Props

NameTypeDefaultDescription
typestring='date'The type of the calendar. Available values include 'date' / 'month' / 'year', denoting date/month/year view respectively. When the value is not 'date', multiple and range will be ignored.
multipleboolean=falseWhether users can select multiple dates (date ranges).
rangeboolean=falseWhether users can select a date range (date ranges).
selectedDate | Array=-

v-model

Selected date(s) or date range(s). Data type differs according to multiple and range.

multiplerangeType
falsefalseDate
truefalseArray<Date>
falsetrue[Date, Date]
truetrueArray<[Date, Date]>
panelnumber=1The number of month panel displayed.
todayDate=new Date()The date of “today”.
week-startnumber=calendar.weekStartThe start of a week. Can be globally configured.
fill-monthboolean=trueWhether to show dates of previous and next month in current panel when there's only one month panel.
date-classstring | Array | Object | function={}Custom HTML class for specified date. All class expressions supported by Vue are available for non-function values. When specified as a function, whose signature is function(Date): string | Array<string>|Object<string, boolean>, the return value is also class expressions suppported by Vue.
disabled-datefunction(Date, Date=): boolean=() => falseUsed to customize whether the specified date is disabled or not. The first parameter is the date to be used to determine if the date is disabled. When in the range selection process and a date is already selected, it is passed as the second parameter.
disabledboolean=falseWhether the calendar is disabled.
readonlyboolean=falseWhether the calendar is read-only.

Slots

NameDescription
beforeCustomizable area before the content of the month panel(s).
afterCustomizable area after the content of the month panel(s).
date

The content of each date cell. Displays the corresponding day of month by default.

NameTypeDescription
yearnumberThe full representation of year.
monthnumberMonth of a year, starting from 0 as January.
datenumberThe day of month.

Events

NameDescription
select

v-model

Triggered when selection change. The callback parameter list is (selected). The type of selected is the same as the selected prop.

selectstartTriggered when selecting a date range and a start date is selected. The callback parameter list is (picking: Date), being the selected start date.
selectprogress

Triggered when selecting a date range and an end date is marked with pointer/keyboard interaction, and for each time the end date changes. The callback parameter list is (picking), with picking being the marked date range. The type of picking depends on the value of the multiple prop.

multipleType
false[Date, Date]
trueArray<[Date, Date]>
viewchangeTriggered when the month of the month panel changes. The callback parameter list is (month: Object<{year: number, month: number}>), representing the current year and month of the first month panel.

Configs

KeyTypeDefaultDescription
calendar.weekStartnumber1The start of a week, with Monday being 1 and Sunday being 7.

Icons

NameDescription
prevPrevious page.
nextNext page.
expandExpand dropdowns.
Edit this page on GitHubEdit