Touch-enabled Date & Week Picker For Vue 3 – mpvue-calendar

Description:

mpvue-calendar is a touch-enabled date & week picker component for Vue 3 applications.

More Features:

  • Supports single date, date range, and week range.
  • Multiple languages.
  • Allows to set custom holidays.
  • Allows to set start/end dates.
  • Allows to disable dates.
  • Custom date format.

How to use it:

1. Import and register the component.

import { ref } from 'vue'
import Calendar from 'mpvue-calendar'
export default {
  components: {
    Calendar,
  }
}

2. Add the calendar to the app.

<Calendar
  :remarks="remarks"
/>
export default {
  components: {
    Calendar,
  },
  setup() {
    const remarks = ref({'2021-2-26': 'Any Text'})
    return {
      remarks,
    }
  }
}

3. Full component props.

format: { // (year, month) => [String, String]
  type: Function,
},
holidays: {
  type: Object,
  default() {
    return {};
  }
},
lunar: {
  type: Object,
},
remarks: {
  type: Object,
  default() {
    return {};
  }
},
monthRange: {
  type: Array,
},
tileContent: {
  type: Object,
  default() {
    return {};
  }
},
completion: {
  type: Boolean,
  default: false
},
useSwipe: {
  type: Boolean,
  default: true
},
backgroundText: {
  type: Boolean,
},
monFirst: {
  type: Boolean,
  default: false
},
className: {
  type: String,
},
mode: { // 'month', 'week','monthRange'
  type: String,
  default: 'month'
},
weeks: {
  type: Array,
  default: undefined
},
begin: {
  type: String,
},
end: {
  type: String,
},
selectMode: { // 'select', 'multi','range', 'multiRange'
  type: String,
  default: 'select'
},
language: {
  type: String,
},
selectDate: {
  type: [String, Array, Object],
},
disabled: {
  type: Object,
},

Preview:

Touch-enabled Date & Week Picker For Vue 3 - mpvue-calendar

Changelog:

v3.0.1 (09/12/2021)

  • fix(calendar): the callback not work when the month slide change

Download Details:

Author: Hzy0913

Live Demo: http://preview.binlive.cn/mpvue-calendar#/

Download Link: https://github.com/Hzy0913/mpvue-calendar/archive/master.zip

Official Website: https://github.com/Hzy0913/mpvue-calendar

Install & Download:

# NPM
$ npm i mpvue-calendar

You Might Be Interested In:

Add Comment