Home

Awesome

<p align="center"> <a href="http://preview.binlive.cn/mpvue-calendar#/"> <img width="100" src="https://raw.githubusercontent.com/Hzy0913/hanlibrary/master/mpvue-calendar.png" alt="mpvue-calendar logo"> </a> </p> <p align="center"> <a href="https://npmcharts.com/compare/mpvue-calendar?minimal=true"> <img src="https://img.shields.io/npm/dm/mpvue-calendar.svg" alt="Downloads"> </a> <a href="https://www.npmjs.com/package/mpvue-calendar"> <img src="https://img.shields.io/npm/v/mpvue-calendar.svg" alt="Version"> </a> <a href="https://www.npmjs.com/package/mpvue-calendar"> <img src="https://img.shields.io/npm/l/mpvue-calendar.svg" alt="License"> </a> </p> <h1 align="center">mpvue-calendar</h1>

A feature-rich calendar component, support multiple modes and gesture sliding. For vue 3.0+

<p align="center"> <img width="940" src="http://img.binlive.cn/687474703a2f2f696d672e62696e6c6976652e636e2f75706c6f61642f3136313339373433383732383363616c656e6461722d707265766965772e706e67.png" alt="mpvue-calendar preview"> </p>

πŸ’» Install

mpvue-calendar only support vue@3.0+

npm i mpvue-calendar -S

πŸ”¨ Usage

<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,
    }
  }
}

βš™οΈ API

nametypedefaultdescription
selectModeString'select'For the selection mode of calendar component, can be used by 'select', 'multi','range', 'multiRange' mode
modeString'month'Configure calendar display mode, the modes has 'month', 'week','monthRange'
selectDateString / String[] / {start: String; end: String} / {start: String; end: String} []In different selection modes, there are use different types. String type for select mode, String[] type for multi mode, {start: String; end: String} type for range mode, and {start: String; end: String} [] type for multiRange mode.
monthRangeString[]If you use monthRange mode, you need to set the content of the month to be displayed. for example [2021-1, 2021-2, 2021-6, 2021-9]
remarksObjectCreate remark for a day, key is date string, and value is remark content. for example { '2021-1-13': 'some things' }
tileContentObjectCreate tile content for a day, key is date string, and value is object, object have className and content. for example { '2021-1-5': { className: 'tip-class', content: 'some tip' } }
holidaysObjectCustom holiday information, for example {'2021-1-1': 'New Year'}
completionBooleanfalseComplete the calendar table with 6 lines
useSwipeBooleantrueThe mobile terminal supports gesture sliding to switch calendar
arrowLeftStringLeft arrow image url of toolbar
arrowRightStringRight arrow image url of toolbar
monFirstBooleanfalseThe first day of the week begins on Monday
backgroundTextBooleanfalseDisplays the background text of the current month calendar
languageStringuse 'en' or 'cn' language
format(year, month) => [String, String]Format the date display at the header. you need return a array, the contents of the array are year and month
weeksString[]Weekly display content of custom header, for example ['S', 'M', 'T', 'W', 'T', 'F', 'S']
beginStringSet the available date of the start, and the date before it will be disabled, for example '2021-1-5'
endStringSet the available date of the end, and the date after it will be disabled, for example '2021-2-5'
disabledString[]Disable certain dates , for example ['2021-1-9', '2021-2-5']

Chinese lunar

If you need show chinese lunar, you need import lunar module.

<Calendar
  :lunar="lunar"
/>

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

βš™οΈ methods

nametypedescription
onSelect(selectDate) => voidThis function is triggered when the date is selected
onMonthChange(year, month, day) => voidThe callback is triggered when the month is change
next(year, month) => voidCallback this method when triggered next month
prev(year, month) => voidCallback this method when triggered prev month
setTodayref methodBack today, you need to pass the ref parameter to call the internal method