项目结构:

概述

可滑动查看的日历模块(内含iOS和Android)

APICloud 的 UICalendar 模块是一个原生代码封装的日历模块。目的是为了让 APICloud 的广大开发者只需用 html+js 即可快速、高效的集成炫酷的日历到自己的 App 内。由于本模块 UI 布局界面为固定模式,不能满足日益增长的广大开发者对侧滑列表模块样式的需求。因此,广大原生模块开发者,可以参考此模块的开发方式、接口定义等开发规范,或者基于此模块开发出更多符合产品设计的新 UI 布局的模块,希望此模块能起到抛砖引玉的作用。

模块接口文档

来自于:官方

模块概述

UICalendar 是一个日历选择模块;可自定义日历的样式,添加特殊日期标注,切换月份,设置指定日期;用于实现常用的日期选择,日历展示功能。UICalendar 模块是 calendar 模块的优化版。

注:针对单日的样式优先级序列为:

selected>setSpecialDate>specialDate>styles_specialDate>today

模块截图:

图片说明

实例widget下载地址

模块接口

open

打开日历

open({params}, callback(ret))

params

multipleSelect:

  • 类型:布尔类型
  • 描述:(可选项)是否可以多选日期
  • 默认值:false

rect:

  • 类型:JSON 对象
  • 描述:(可选项)模块的位置及尺寸
  • 内部字段:

styles:

  • 类型:JSON 对象
  • 描述:(可选项)模块各部分的样式
  • 内部字段:

specialDate:

  • 类型:数组
  • 描述:(可选项)需要标记的特殊日期数组
  • 内部字段:

switchMode:

  • 类型:字符串
  • 描述:(可选项)月份的切换方式
  • 默认值:'vertical'
  • 取值范围:
    • vertical(上下切换)
    • horizontal(左右切换)
    • none(不支持通过手势切换月份)

isBefore:

  • 类型:布尔
  • 描述:(可选项)今天以前的日期是否置灰不可选
  • 默认值:false

isAfter:

  • 类型:布尔
  • 描述:(可选项)今天以后的日期是否置灰不可选
  • 默认值:false

showTodayStyle:

  • 类型:布尔
  • 描述:(可选项)当天日期是否使用特殊格式显示(仅android有效)
  • 默认值:true

fixedOn:

  • 类型:字符串类型
  • 描述:(可选项)模块视图添加到指定 frame 的名字(只指 frame,传 window 无效)
  • 默认:模块依附于当前 window

fixed:

  • 类型:布尔
  • 描述:(可选项)模块是否随所属 window 或 frame 滚动
  • 默认值:true(不随之滚动)

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:

示例代码

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setSpecialDates

设置特殊日期

setSpecialDates({params})

params

id:

  • 类型:数字类型
  • 描述:日历视图id

specialDates:

  • 类型:数组
  • 描述:需要标记的特殊日期数组,格式为:yyyy-MM-dd
  • 内部字段:

示例代码

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

cancelSpecialDates

取消已设置的特殊日期状态

cancelSpecialDates({params})

params

id:

  • 类型:数字类型
  • 描述:日历视图id

specialDates:

  • 类型:数组
  • 描述:需要取消的特殊日期组成的数组,格式为:yyyy-MM-dd

示例代码

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭日历

close({params})

params

id:

  • 类型:数字类型
  • 描述:日历视图id

示例代码

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示日历

show({params})

params

id:

  • 类型:数字类型
  • 描述:日历视图id

示例代码

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏日历

hide({params})

params

id:

  • 类型:数字类型
  • 描述:日历视图id

示例代码

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

nextMonth

显示下个月

nextMonth({params},callback(ret))

params

id:

  • 类型:数字类型
  • 描述:日历视图id

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:

示例代码

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

prevMonth

显示上个月

prevMonth({params},callback(ret))

params

id:

  • 类型:数字类型
  • 描述:日历视图id

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:

示例代码

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

nextYear

显示下一年

nextYear({params},callback(ret))

params

id:

  • 类型:数字类型
  • 描述:日历视图id

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:

示例代码

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

prevYear

显示上一年

prevYear({params},callback(ret))

params

id:

  • 类型:数字类型
  • 描述:日历视图id

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:

示例代码

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setDate

设置选中日期(不支持日期多选模式)

setDate({params}, callback(ret))

params

id:

  • 类型:数字类型
  • 描述:日历视图id

date:

  • 类型:字符串
  • 描述:(可选项)选中日期,格式为:yyyy-MM-dd
  • 默认值:当前日期

ignoreSelected:

  • 类型:布尔
  • 描述:(可选项)选中日期是否忽略选中日期样式(open -> styles -> date -> selectedColor、selectedBg)
  • 默认值:false

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:

示例代码

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

turnPage

翻到指定的页

turnPage({params})

params

id:

  • 类型:数字类型
  • 描述:日历视图id

date:

  • 类型:字符串
  • 描述:选中日期,格式为:yyyy-MM

示例代码

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

论坛示例

为帮助用户更好更快的使用模块,论坛维护了一个示例,示例中包含示例代码、知识点讲解、注意事项等,供您参考。

下载地址:微信扫一扫,关注下方【毕业设计组织】公众号,请回复数字”6909“获取下载链接