UICalendar

来自于：官方立即使用

open setSpecialDates cancelSpecialDates close show hide nextMonth prevMonth nextYear prevYear setDate turnPage

论坛示例

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

模块概述

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

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

selected>setSpecialDate>specialDate>styles_specialDate>today

模块截图：

图片说明

该模块源码已开源，地址：https://github.com/apicloudcom/UICalendar

实例widget下载地址

模块接口

open

打开日历

open({params}, callback(ret))

params

multipleSelect：

  • 类型：布尔类型
  • 描述：（可选项）是否可以多选日期
  • 默认值：false

rect：

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

styles：

  • 类型：JSON 对象
  • 描述：（可选项）模块各部分的样式
  • 内部字段：
  1. {
  2.     bg: 'rgba(0,0,0,0)',            //（可选项）字符串类型；日历整体背景，支持 rgb、rgba、#、图片路径，要求本地路径（fs://、widget://）；默认：'rgba(0,0,0,0)'
  3.     week: {                         //（可选项）JSON对象，星期的样式
  4.         weekdayColor: '#3b3b3b',    //（可选项）字符串类型；平日文字的颜色，支持 rgb、rgba、#；默认：'#3b3b3b'
  5.         weekendColor: '#a8d400',    //（可选项）字符串类型；周末文字的颜色，支持 rgb、rgba、#；默认：'#a8d400'
  6.         size: 24                    //（可选项）数字类型；星期文字的大小；默认：24
  7.     },
  8.     date: {                         //（可选项）JSON对象，普通日期的样式
  9.         color: '#3b3b3b',           //（可选项）字符串类型；普通日期文字的颜色；支持 rgb、rgba、#；默认：'#3b3b3b'
  10.         selectedColor: '#fff',      //（可选项）字符串类型；普通日期选中后的文字颜色，支持 rgb、rgba、#；默认：'#fff'
  11.         selectedBg: '#a8d500',      //（可选项）字符串类型；普通日期选中后的背景，支持 rgb、rgba、#，图片路径，要求本地路径（fs://、widget://）；默认：'#a8d500'
  12.         size: 24                    //（可选项）数字类型；普通日期文字的大小；默认：24
  13.     },
  14.     today: {                        //（可选项）JSON对象，设备当前日期的样式
  15.         color: '#a8d500',           //（可选项）字符串类型；当前日期的文字颜色，支持 rgb、rgba、#；默认：'#a8d500'
  16.         bg: 'widget://'             //（可选项）字符串类型；当前日期的背景，支持 rgb、rgba、#，图片路径，要求本地路径（fs://、widget://）
  17.     },
  18.     specialDate: {                  //（可选项）JSON对象，需要标记的特殊日期的通用样式                  
  19.         color: '#3b3b3b',           //（可选项）字符串类型；文字颜色，支持 rgb、rgba、#；默认：与普通日期文字颜色一致
  20.         bg: 'widget://'             //（可选项）字符串类型；支持 rgb、rgba、#，图片路径，要求本地路径（fs://、widget://）；默认：与普通日期选中后的背景一致
  21.     }
  22. }

specialDate：

  • 类型：数组
  • 描述：（可选项）需要标记的特殊日期数组
  • 内部字段：
  1. [{
  2.     date: '2015-07-27'          //字符串类型；日期字符串，格式为：yyyy-MM-dd
  3.     color: '#3b3b3b',           //（可选项）字符串类型；文字颜色，支持 rgb、rgba、#；默认：与 styles->specialDate->color 一致
  4.     bg: 'widget://'             //（可选项）字符串类型；支持 rgb、rgba、#，图片路径，要求本地路径（fs://、widget://）；默认：与 styles->specialDate->bg 一致
  5. }]

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 对象
  • 内部字段：
  1. {
  2.     eventType: 'show',          //字符串类型；交互事件类型
  3.                                 //取值范围：
  4.                                 //show（日历显示）
  5.                                 //switch（水平或垂直切换月份）
  6.                                 //special（点击特殊日期）
  7.                                 //normal（点击普通日期）
  8.                                 //cancelNormal（取消点击普通日期）
  9.                                 //cancelSpecial（取消点击特殊日期）
  11.     year: 2015,                 //数字类型；当前选择的年份
  12.     month: 7,                   //数字类型；当前选择的月份
  13.     day: 27,                     //数字类型；当前选择的日期
  14.     id:0                      //数字类型，打开日历视图的ID
  15. }

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setSpecialDates

设置特殊日期

setSpecialDates({params})

params

id:

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

specialDates：

  • 类型：数组
  • 描述：需要标记的特殊日期数组，格式为：yyyy-MM-dd
  • 内部字段：
  1. [{
  2.     date: '2015-07-27'          //字符串类型；日期字符串，格式为：yyyy-MM-dd
  3.     color: '#3b3b3b',           //（可选项）字符串类型；文字颜色，支持 rgb、rgba、#；默认：与 styles->specialDate->color 一致
  4.     bg: 'widget://'             //（可选项）字符串类型；支持 rgb、rgba、#，图片路径，要求本地路径（fs://、widget://）；默认：与 styles->specialDate->bg 一致
  5. }]

示例代码

  1. var UICalendar = api.require('UICalendar');
  2. UICalendar.setSpecialDates({
  3.     id: ,
  4.     specialDates: [{
  5.         date: '2015-12-07',
  6.         color: '#abckde',
  7.         bg: '#ff0000'
  8.     }, {
  9.         date: '2015-12-08',
  10.         color: '#abckde',
  11.         bg: '#ff0000'
  12.     }]
  13. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

cancelSpecialDates

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

cancelSpecialDates({params})

params

id:

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

specialDates：

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

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭日历

close({params})

params

id:

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

示例代码

  1. var UICalendar = api.require('UICalendar');
  2. UICalendar.close({id:0});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示日历

show({params})

params

id:

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

示例代码

  1. var UICalendar = api.require('UICalendar');
  2. UICalendar.show({id:0});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏日历

hide({params})

params

id:

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

示例代码

  1. var UICalendar = api.require('UICalendar');
  2. UICalendar.hide({id:0});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

nextMonth

显示下个月

nextMonth({params},callback(ret))

params

id:

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

callback(ret)

ret：

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

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

prevMonth

显示上个月

prevMonth({params},callback(ret))

params

id:

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

callback(ret)

ret：

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

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

nextYear

显示下一年

nextYear({params},callback(ret))

params

id:

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

callback(ret)

ret：

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

示例代码

  1. var UICalendar = api.require('UICalendar');
  2. UICalendar.nextYear({
  3.  id:0
  4. },function(ret, err) {
  5.     if (ret) {
  6.         alert(JSON.stringify(ret));
  7.     } else {
  8.         alert(JSON.stringify(err));
  9.     }
  10. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

prevYear

显示上一年

prevYear({params},callback(ret))

params

id:

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

callback(ret, err)

ret：

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

示例代码

  1. var UICalendar = api.require('UICalendar');
  2. UICalendar.prevYear({
  3.  id:0
  4. },function(ret, err) {
  5.     if (ret) {
  6.         alert(JSON.stringify(ret));
  7.     } else {
  8.         alert(JSON.stringify(err));
  9.     }
  10. });

可用性

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 对象
  • 内部字段：
  1. {
  2.     status: true        //布尔型；true||false
  3. }

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

turnPage

翻到指定的页

turnPage({params})

params

date：

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

示例代码

  1. var UICalendar = api.require('UICalendar');
  2. UICalendar.turnPage({
  3.     date: '2015-08'
  4. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

论坛示例

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