mpvue-calendar

A feature-rich calendar component that supports multiple modes and gesture swiping. Based on the vue 3.0 +

  • GitHub

  • preview

  • example

💻 installation

Mpvue-calendar only supports [email protected]+

npm i mpvue-calendar -S
Copy the code

🔨 use

<Calendar
  backgroundText
  class-name="select-mode"
  :remarks="remarks"
/>

import { ref } from 'vue'
import Calendar from 'mpvue-calendar'

export default {
  components: {
    Calendar,
  },
  setup() {
    const remarks = ref({'2021-1-13': 'some tings'})

    return {
      remarks,
    }
  }
}
Copy the code

⚙ ️ API

name type default description
selectMode String ‘select’ Select mode for the calendar component by passing **’select’.‘multi’.‘range’**, ‘multiRange’Parameter usage.
mode String ‘month’ Configure calendar display mode, which can be passed in‘month’.‘week’.‘monthRange’Use this feature
selectDate String / String[] / {start: String; end: String} / {start: String; end: String} [] In different selection modes, different data types are required.StringThe type corresponds to the ‘SELECT’ mode,String[]The array type corresponds to the ‘multi’ mode,{start: String; end: String}The type corresponds to in ‘range’ mode,{start: String; end: String}[]Array types correspond in ‘multiRange’ mode
monthRange String[] If you use monthRange mode, you need to set the content of the month to be displayed. Example: [2021-1, 2021-2, 2021-3]
remarks Object Create a note for a day. Key is the date string and value is the note content. For example {‘2021-1-13’ : ‘Some notes ‘}
tileContent Object Create the content of the patch for a particular day. Key is the date string, value is object,objectThere areclassNameandcontentField. For example {2021-1-5′ : {className:’tip class’, content:’some tip’}
holidays Object Customize holiday information, for example {‘2021-1 ‘:’New Year’}
completion Boolean false Complete the calendar table with 6 rows
useSwipe Boolean true Enable the mobile terminal to support gesture sliding switch calendar
monFirst Boolean false The first day of the week starts on Monday
backgroundText Boolean false Displays background text for the current month
language String use‘en’ 或 ‘cn’language
format (year, month) => [String, String] Format header date display. You need to return an array of the corresponding year and month
weeks String[] Customize the weekly display of the header, for example [‘ Monday ‘, ‘Tuesday ‘,’ Wednesday ‘, ‘Thursday’…
begin String Set the available date to start, dates prior to which will be disabled, such as ‘2021-1-5’
end String Set end available date, dates after this will be disabled, for example ‘2021-2-5’
disabled String[] Disable certain dates, for example[' 2021-1-9 ', '2021-2-5']

According to the lunar calendar

If you need to display the lunar calendar, you need to import the Lunar module.

<Calendar
  :lunar="lunar"
/>

import lunar from 'mpvue-calendar/dist/lunar'
export default{... .setup() {
    return {
      lunar,
    }
  }
}
Copy the code

⚙ ️ the methods

name type description
onSelect (selectDate) => void This function fires when a date is selected
monthChange (year, month, day) => void This callback is triggered when there is a change in the current month
next (year, month) => void The callback method is triggered when the next month starts
prev (year, month) => void The callback method is triggered when last month is entered
setToday ref method Back today, you need to pass the REF parameter to invoke the component’s internal methods