A miniprogram date component that supports sliding, weekly folding, and brisk
npm install miniprogram-wecalendar> A miniprogram date component that supports sliding, weekly folding, and brisk
> Built with ESbuild, now responsive
---





---


``js`
npm i miniprogram-wecalendar
or
``
yarn add miniprogram-wecalendar
> Add the calendar custom component configuration to the page page.json or app.json that needs to use the calendar
`json`
{
"usingComponents": {
"WeCalendar": "miniprogram-wecalendar"
}
}less
> ~~open Development tools mode ~~
>
> 1.2.0 Support wxss
`json`
"useCompilerPlugins": [
"less"
]
- Use ππ» in wxml
`html`
| 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 |
| Property | Type | Description |
| ----------- | ----------------- | ------------------------------------------- |
| onSelect | Function Callback | How to choose a date |
| onRangeDate | Function Callback | The scope of each rendering of the calendar |
- onSelect
`js`
onSelect: (e) => {
const {day} = e.detail
// ...
}
- onRangeDate
`js`
onRangeDate: (e) => {
const {beginTime, endTime} = e.detail
// ...
}
`js`
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