Press "Enter" to skip to content

📅 A Calendar Gesture Range Selection Siding Component for vue3

mpvue-calendar is a feature-rich calendar component, supporting multiple modes and sliding gestures.

bootstrap week picker, week picker jquery, datepicker week view, date range picker, html day of week picker, date range picker bootstrap

Features:

  • Supports single date, date range, and week range.
  • Multiple languages.
  • Custom holidays are allowed.
  • Allows setting start/end dates.
  • Dates are allowed to be disabled.
  • Custom date format.

How to make use of it:

Install and download:

# NPM
$ npm i mpvue-calendar

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 application.

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

3. Complete 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,
},

Touch-enabled Date & Week Picker For Vue, mpvue-calendar Plugin/Github


See Demo And Download

Official Website(Hzy0913): Click Here

This superior jQuery/javascript plugin is developed by Hzy0913. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *