miniprogram-wecalendar

A miniprogram date component that supports sliding, weekly folding, and brisk Built with ESbuild, now responsive

---

---

中文 README

Exhibit

install

npm i miniprogram-wecalendar

or

yarn add miniprogram-wecalendar

use

Add the calendar custom component configuration to the page page.json or app.json that needs to use the calendar

{
  "usingComponents": {
    "WeCalendar": "miniprogram-wecalendar"
  }
}

open Development tools mode less

1.2.0 Support wxss

"useCompilerPlugins": [
            "less"
        ]

• Use 👇🏻 in wxml

<WeCalendar markCalendarList="{{markCalendarList}}" isToday="{{true}}" bind:onRangeDate="onRangeDate" bind:onSelect="onSelect" />

WeCalendar of then properties

Property	Type	Default	required	Description
isToday	Boolean	False	0	Whether to show today button
markCalendarList	Array[{ date: YYYY-MM-DD pointColor: #ccc }]	[]	0	Calendar markers, color can be customized
defaultDate	String: YYYY-MM-DD	Null	0	Default date
showFolding	Boolean	True	0	Calendar folding function
weeekLayer	Number	1	0	Number of rows in collapsed state

WeCalendar of then Func

Property	Type	Description
onSelect	Function Callback	How to choose a date
onRangeDate	Function Callback	The scope of each rendering of the calendar

For example 🌰

• onSelect

onSelect: (e) => {
  const {day} = e.detail
  // ...
}

• onRangeDate

onRangeDate: (e) => {
  const {beginTime, endTime} = e.detail
  // ...
}

Development start

npm run dev

• • Use the WeChat applet development tool to open the demo folder, change the file under src and it will be automatically built