miCalendar

来自于:开发者 立即使用

open setSpecialDates cancelSpecialDates close show hide nextMonth prevMonth setDate

模块概述

miCalendar 是一个高仿小米的日历控件;支持快速滑动,并且可以显示农历,节假日,24节气的日历,可自定义日历的样式,添加特殊日期标注,切换月份,设置指定日期;用于实现常用的日期选择,日历展示功能。使用起来非常简单,就像使用ListView一样。注意:iOS 设备使用时需勾选日历权限,否则会闪退

注:针对单日的样式优先级序列为: selected>setSpecialDate>specialDate>styles_specialDate>today 模块截图:

图片说明

模块接口

open

打开日历

open({params}, callback(ret))

params

rect:

  • 类型:JSON 对象
  • 描述:(可选项)模块的位置及尺寸
  • 内部字段:
  1. {
  2. x: 0, //(可选项)数字类型;模块左上角的 x 坐标(相对于所属的 Window 或 Frame);默认:0
  3. y: 0, //(可选项)数字类型;模块左上角的 y 坐标(相对于所属的 Window 或 Frame);默认:0
  4. w: 320, //(可选项)数字类型;模块的宽度;默认:所属的 Window 或 Frame 的宽度
  5. h: 220 //(可选项)数字类型;模块的高度;默认:220
  6. }

currentDateTitle:

  • 类型:JSON 对象
  • 描述: (可选项)当前日期的位置和尺寸
  • 内部字段:
  1. {
  2. h: 44 , //(可选项)数字类型;当前日期的高度;默认:44
  3. size:24, //(可选项) 数字类型;当前日期的文字大小;默认:24
  4. color:'#C0FF3E', //(可选项) 字符串类型;当前日期的文字的颜色;默认:'#C0FF3E'
  5. backgroundColor:'#BA55D3'//(可选项) 字符串类型;当前日期的背景颜色;默认:'#BA55D3'
  6. }

styles:

  • 类型:JSON 对象
  • 描述:(可选项)模块各部分的样式
  • 内部字段:
  1. {
  2. bg: 'rgba(0,0,0,0)', //(可选项)字符串类型;日历整体背景,支持 rgb、rgba、#、图片路径,要求本地路径(fs://、widget://);默认:'rgba(0,0,0,0)'(iOS仅支持颜色设置)
  3. viewbg: 'rgba(0,0,0,0)', //(可选项)字符串类型;整个view背景,支持 rgb、rgba、#;默认:'rgba(0,0,0,0)'(仅ios支持)
  4. cornerRadius:1, //(可选性)数字类型;设备当前日期和选中日期背景圆角;默认:1
  5. title: { //(可选项)JSON对象,星期的样式
  6. color: '#3b3b3b', //(可选项)字符串类型;文字的颜色,支持 rgb、rgba、#;默认:'#3b3b3b'
  7. size: 12 //(可选项)数字类型;星期文字的大小;默认:12
  8. },
  9. date: { //(可选项)JSON对象,普通日期的样式
  10. color: '#3b3b3b', //(可选项)字符串类型;普通日期文字的颜色;支持 rgb、rgba、#;默认:'#3b3b3b'
  11. selectedColor: '#fff', //(可选项)字符串类型;普通日期选中后的文字颜色,支持 rgb、rgba、#;默认:'#fff'
  12. selectedBg: '#a8d500', //(可选项)字符串类型;普通日期选中后的背景,支持 rgb、rgba、#,默认:'#a8d500'
  13. size: 12 //(可选项)数字类型;普通日期文字的大小;默认:12
  14. },
  15. today: { //(可选项)JSON对象,设备当前日期的样式
  16. color: '#a8d500', //(可选项)字符串类型;当前日期的文字颜色,支持 rgb、rgba、#;默认:'#a8d500'
  17. bg: '#f00' //(可选项)字符串类型;当前日期的背景,支持 rgb、rgba、#,默认'#f00'
  18. },
  19. }

specialDate:

  • 类型:数组
  • 描述:(可选项)需要标记的特殊假期数组
  • 内部字段:
  1. [{
  2. date: '2015-05-01' //字符串类型;日期字符串,格式为:yyyy-MM-dd
  3. badge: 'widget://' //(可选项)字符串类型;表示休息或者上班,图片路径,要求本地路径(fs://、widget://);默认:
  4. }]

isLunarCalendar:

  • 类型:布尔
  • 描述:(可选项)是否显示农历
  • 默认值:true

scrollEnabled:

  • 类型:布尔
  • 描述:(可选项)是否允许左右滑动切换
  • 默认值:true

isToday:

  • 类型:布尔
  • 描述:(可选项)日期选中后,设备当前日期样式是否消失,设置为true后,日期选中后,设备当前日期样式消失,选中设备当前日期后,样式显示为选中日期样式
  • 默认值:false

fixedOn:

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

fixed:

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

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. eventType: 'show', //字符串类型;交互事件类型
  3. //取值范围:
  4. //show(日历显示)
  5. //click(点击日期)
  6. date:'2015-05-01' //字符串类型;当前选择的日期
  7. chinaDate:' 农历己亥(猪)年三月初七' //字符串类型:农历年月日
  8. }

示例代码

  1. var miCalendar = api.require('miCalendar');
  2. miCalendar.open({
  3. rect: {
  4. x: 30,
  5. y: api.frameHeight / 2 - 170,
  6. w: api.frameWidth,
  7. h: 340
  8. },
  9. currentDateTitle: {
  10. h: 44 ,
  11. size:24,
  12. color:'#C0FF3E',
  13. backgroundColor:'#BA55D3'
  14. },
  15. styles: {
  16. bg: 'rgba(0,0,0,0)',
  17. title: {
  18. color: '#3b3b3b',
  19. size: 12
  20. },
  21. date: {
  22. color: '#3b3b3b',
  23. selectedColor: '#fff',
  24. selectedBg: '#a8d500',
  25. size: 12
  26. },
  27. today: {
  28. color: 'rgb(230,46,37)',
  29. bg: '#f00'
  30. },
  31. },
  32. specialDate: [{
  33. date: '2015-06-01'
  34. }],
  35. isLunarCalendar:true,
  36. fixedOn: api.frameName,
  37. fixed: false
  38. }, function(ret, err) {
  39. if (ret) {
  40. alert(JSON.stringify(ret));
  41. } else {
  42. alert(JSON.stringify(err));
  43. }
  44. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setSpecialDates

设置特殊日期

setSpecialDates({params})

params

specialDates:

  • 类型:数组
  • 描述:需要标记的特殊假期数组,格式为:yyyy-MM-dd
  • 内部字段:
  1. [{
  2. date: '2015-07-27' //字符串类型;日期字符串,格式为:yyyy-MM-dd
  3. badge: 'widget://' //(可选项)字符串类型;表示上班,图片路径,要求本地路径(fs://、widget://);默认:
  4. }]

示例代码

  1. var miCalendar = api.require('miCalendar');
  2. miCalendar.setSpecialDates({
  3. specialDates: [{
  4. date: '2015-12-07',
  5. badge:''
  6. }, {
  7. date: '2015-12-08',
  8. badge:''
  9. }]
  10. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

cancelSpecialDates

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

cancelSpecialDates({params})

params

specialDates:

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

示例代码

  1. var miCalendar = api.require('miCalendar');
  2. miCalendar.cancelSpecialDates({
  3. specialDates: ['2015-12-08', '2015-12-07']
  4. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭日历

close()

示例代码

  1. var miCalendar = api.require('miCalendar');
  2. miCalendar.close();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示日历

show()

示例代码

  1. var miCalendar = api.require('miCalendar');
  2. miCalendar.show();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏日历

hide()

示例代码

  1. var miCalendar = api.require('miCalendar');
  2. miCalendar.hide();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

nextMonth

显示下个月

nextMonth(callback(ret))

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. year: '2015', //字符串类型;当前显示的年份
  3. month: '8' //字符串类型;当前显示的月份
  4. }

示例代码

  1. var miCalendar = api.require('miCalendar');
  2. miCalendar.nextMonth(function(ret, err) {
  3. if (ret) {
  4. alert(JSON.stringify(ret));
  5. } else {
  6. alert(JSON.stringify(err));
  7. }
  8. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

prevMonth

显示上个月

prevMonth(callback(ret))

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. year: '2015', //字符串类型;当前显示的年份
  3. month: '6' //字符串类型;当前显示的月份
  4. }

示例代码

  1. var miCalendar = api.require('miCalendar');
  2. miCalendar.prevMonth(function(ret, err) {
  3. if (ret) {
  4. alert(JSON.stringify(ret));
  5. } else {
  6. alert(JSON.stringify(err));
  7. }
  8. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setDate

设置选中日期(可通过此接口实现翻页效果)

setDate({params}, callback(ret))

params

date:

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

ignoreSelected:

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

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. status: true //布尔型;true||false
  3. }

示例代码

  1. var miCalendar = api.require('miCalendar');
  2. miCalendar.setDate({
  3. date: '2015-08-08',
  4. ignoreSelected: false
  5. }, function(ret, err) {
  6. if (ret.status) {
  7. alert(JSON.stringify(ret));
  8. } else {
  9. alert(JSON.stringify(err));
  10. }
  11. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本