日历组件WeCalendar;支持折叠周模式;滑动;自定义标记
发布于 1 年前 作者 shaomin 1267 次浏览 来自 分享

miniprogram-wecalendar

一个支持滑动、自定义折叠、标记日期、轻快的小程序日期组件
使用ESbuild 构建,现在的快速响应的







英文 README

展示

安装

npm i miniprogram-wecalendar

or

yarn add miniprogram-wecalendar

使用

在使用地方 page.json 或者 app.json 中使用 👇🏻

{
  "usingComponents": {
    "WeCalendar": "miniprogram-wecalendar"
  }
}
  • 在 wxml 加入使用 👇🏻
<WeCalendar markCalendarList="{{markCalendarList}}" isToday="{{true}}" bind:onRangeDate="onRangeDate" bind:onSelect="onSelect" />

WeCalendar的参数

Property Type Default required Description
isToday Boolean False 0 是否展示今天俺妞icon
markCalendarList Array[{ date: YYYY-MM-DD pointColor: #ccc }] [] 0 标记日历的数组,支持自定义颜色
defaultDate String: YYYY-MM-DD Null 0 默认时间
showFolding Boolean True 0 日历折叠功能
weeekLayer Number 1 0 日历折叠的等级 | 行数

WeCalendar 的方法

Property Type Description
onSelect Function Callback 日历每天的点击事件
onRangeDate Function Callback 日历渲染的日期范围

举个例子 🌰

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

开发启动

npm run dev
  • 用微信小程序开发工具打开demo文件夹即可,更改src下面的文件会自动构建
回到顶部