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及更高版本