借鉴了MIUI 12
日历的部分设计,制作适合微信小程序的日历
· 周月视图切换 · 日期标记 · 农历信息
直接复制dist/wx-calendar到你的项目
页面json配置:
{
"usingComponents": {
"calendar": "/your-path/wx-calendar/index"
}
}
在页面wxml文件中:
<calendar id="calendar" bindload="handleLoad" />
注意
请在 bindload 事件后执行 selectComponent('#calendar') 操作。
启动
npm install
npm run dev
目录结构:
├─dev(直接用微信开发工具打开此目录,用其它工具编辑代码可响应变化)
├─dist(组件代码生成目录)
├─gulpfile.js(gulp配置)
├─test(测试)
├─src(主要开发目录)
│ ├─plugins
│ │ └─lunar.js(农历)
│ ├─utils
│ │ ├─handler.js(日期处理)
│ │ ├─service.js(服务注册)
│ │ ├─tools.js(工具方法)
│ │ └─device.js(设备布局)
│ ├─styles
│ │ ├─theme.scss(主题色和字体)
│ │ ├─mixin.scss(混入)
│ │ ├─functions.scss(公共方法)
│ │ ├─animation.scss(动画)
│ │ ├─container.scss(基本样式)
│ │ ├─topinfo.scss(标题和视图控制样式)
│ │ ├─panel.scss(星期和月面板样式)
│ │ ├─bar.scss(底部控制条样式)
│ │ ├─year.scss(年面板样式)
│ │ └─darkmode.scss(深色模式)
| ├─index.js
| ├─index.wxml
| ├─index.scss
| ├─index.json
| └─index.wxs
├─.babelrc(babel配置)
└─package.json(项目配置)
对src/styles/theme.scss定义的变量修改可满足基本的样式修改
测试目录test没有完成,因为我发现用微信开发工具导入dev目录,用其他开发工具编辑代码效果很好
打包
npm run build
属性名 | 类型 | 说明 | 默认值 | 版本 |
---|---|---|---|---|
view | String | 初始化为月视图或周视图 | month [week] | 2.0 |
String | 定位 | relative [absolute, fixed] | 1.0 | |
String | Number | 绝对定位有效 | -- | 1.0 | |
_markers | Array | 日期标记 | -- | 2.0 |
String | 标记标识字段,用于筛选 | id | 1.0 | |
_vibrate | Boolean | 点选日期是否震动 | true | 2.0 |
darkmode | Boolean | 黑暗模式 | false | 2.0 |
_date | String|Number|Array|Object | 选择初始日期 | xxxx-xx-xx | timestamp | [xxxx, xx, xx] | { year, month, day } | 2.0 |
checkedShow | Boolean | 选中状态显示 | true | 2.0 |
_startWeek | Number | 一周开始日 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 2.0 |
showLunar | Boolean | 显示农历 | true | 2.0 |
showMark | Boolean | 显示标记 | true | 2.0 |
关于 _markers
版本号显示2.0的属性时wx-calendar2.0新增或延续的属性,版本号显示1.0的属性在2.0中已废弃
bindload
日历加载完成
e.detail = { date, range, visual, view } # date为当前选择日期 # range: 当前swiper日期范围 # visual: 可视区域日期范围 # visualMonth: 当前月 # view: 当前面板视图,月/周
binddatechange
日期选择变化
e.detail = { date, range, visual, view, visualMonth, rangeChange } # date为当前选择日期 # range: 当前swiper日期范围 # visual: 可视区域日期范围 # visualMonth: 当前月 # view: 当前面板视图,月/周 # rangeChange: 日期范围是否变化
bindrangechange 日期范围变化,2.0已废弃
e.detail = { curr, range, view, visual, markerCommit } # curr: 当前选择日期 # range: 当前swiper日期范围 # visual: 可视区域日期范围 # view: 当前面板视图,月/周 # markerCommit(markers): 提交日期标记的方法,参数markers和属性_markers一致
bindviewchange
面板视图变化
e.detail = { view } # view: 当前面板视图,月/周
bindrangechange事件已于2.0版本中废弃,考虑到日期范围变化是日期选择变化的充分条件,继续注册这个事件没有多大意义,其核心字段range,visual已移到binddatechange事件中,注意日期范围变化非日期选择变化的必要条件,请对range前后比较后判断日期范围是否变化
名称 | 说明 |
---|---|
— | 试一下就知道了,没啥可说的 |
toDate
void 跳转到日期
function(date|year, [month], [day]) # 接受1个或3个参数 # 只有1个参数时,可以为[Date|String]类型,当为String时形如 2021-4-10 # 3个参数时,则为具体的 年,月,日
toMonth
void 跳转到月份
function(year, month) # 参数为 年,月
prev
void 向前一个月
next
void 向后一个月
toggleView
void 切换面板视图
function(view) # 参数 view 为切换至 月month|周week
getDateInfo
object 获取某个日期的信息
function(date|year, [month], [day]) # 参数同 toDate
setMarkers void 设置日期标记,2.0已废弃
function(markers) # 参数 markers 同属性 _markers
addMarker void 新增日期标记,2.0已废弃
function(marker) # 参数 marker = { year, month, day, type, mark, color, bgColor }
editMarker void 修改日期标记,2.0已废弃
function(marker) # 参数 marker = { [_markerKey], year, month, day, type, mark, color, bgColor } # [_markerKey] 标记标识字段,可以由属性_markerKey定义,默认为id
delMarker void 删除日期标记,2.0已废弃
function(date, type, key) # 参数 date = { year, month, day } 某个日期 # 参数 type = [holiday|corner|schedule] 当type为空时,会删除掉date下的所有类型标记 # 参数 key 为标记标识字段的值,当key为空时,会删除掉date下的所有type类型的标记
关于 marker.type
reloadMarkers void 重新加载所有日期标记,2.0已废弃
reloadPos
Promise 重新计算calendar和选中状态的位置
关于日期标记的5个方法setMarkers,addMarker,editMarker,delMarker和reloadMarkers在2.0版本中已全部废弃,主要是因为对属性_markers加了监听器,如下
2.0版本对属性_markers添加了监听器, 只需对传入的_makers进行更改,calendar即可相应变化, 注意,请在bindload事件之后对传入的_makers进行变动, 在日历加载期间,会略过_markers变动,不响应变化 当然,赋初始值不受任何影响
涉及到日期标记
无论是标记数组还是单个标记,都是形如以下:
marker = { year, month, day, type, mark, color, bgColor } markers = [{ year, month, day, type, mark, color, bgColor }]
year,month,day 年月日 type = [holiday|corner|schedule] 节假日|角标|日程 mark 为标记内容 color 为字体颜色 bgColor 为背景颜色
节假日会截取
mark
头两个字符,长度最好为2,角标截取mark
头一个字符,长度最好为1
实用于公历 1901 年至 2100 年之间的 200 年 参考了eleworld.com上的算法,并修正了5处节气错误 * 2014年3月5日 惊蛰 * 2051年3月21日 春分 * 2083年2月4日 立春 * 2084年3月20日 春分 * 2094年6月6日 芒种
有任何问题或是需求请到 `Issues` 面板提交 忙的时候还请见谅 有兴趣开发维护的小伙伴加微信