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