miCalendar

来自于:开发者 立即使用

模块概述

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

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

图片说明

模块接口

open

打开日历

open({params}, callback(ret))

params

rect:

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

currentDateTitle:

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

styles:

  • 类型:JSON 对象
  • 描述:(可选项)模块各部分的样式
  • 内部字段:
{
    bg: 'rgba(0,0,0,0)',            //(可选项)字符串类型;日历整体背景,支持 rgb、rgba、#、图片路径,要求本地路径(fs://、widget://);默认:'rgba(0,0,0,0)'(iOS仅支持颜色设置)
   title: {                         //(可选项)JSON对象,星期的样式
        color: '#3b3b3b',    //(可选项)字符串类型;文字的颜色,支持 rgb、rgba、#;默认:'#3b3b3b'
        size: 12                    //(可选项)数字类型;星期文字的大小;默认:12
    },
    date: {                         //(可选项)JSON对象,普通日期的样式
        color: '#3b3b3b',           //(可选项)字符串类型;普通日期文字的颜色;支持 rgb、rgba、#;默认:'#3b3b3b'
        selectedColor: '#fff',      //(可选项)字符串类型;普通日期选中后的文字颜色,支持 rgb、rgba、#;默认:'#fff'
        selectedBg: '#a8d500',      //(可选项)字符串类型;普通日期选中后的背景,支持 rgb、rgba、#,默认:'#a8d500'
        size: 12                   //(可选项)数字类型;普通日期文字的大小;默认:12
    },
    today: {                        //(可选项)JSON对象,设备当前日期的样式
        color: '#a8d500',           //(可选项)字符串类型;当前日期的文字颜色,支持 rgb、rgba、#;默认:'#a8d500'
        bg: '#f00'             //(可选项)字符串类型;当前日期的背景,支持 rgb、rgba、#,默认'#f00'
    },
}

specialDate:

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

isLunarCalendar:

  • 类型:字符串
  • 描述:(可选项)是否显示农历
  • 默认值:'true'

fixedOn:

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

fixed:

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

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    eventType: 'show',          //字符串类型;交互事件类型
                                //取值范围:
                                //show(日历显示)
                                //click(点击日期)
    date:'2015-05-01'           //字符串类型;当前选择的日期                            
}

示例代码

var miCalendar = api.require('miCalendar');
miCalendar.open({
    rect: {
        x: 30,
        y: api.frameHeight / 2 - 170,
        w: api.frameWidth,
        h: 340
    },
    currentDateTitle: {
         h: 44 ,
         size:24,
         color:'#C0FF3E',
         backgroundColor:'#BA55D3'    
         },
    styles: {
        bg: 'rgba(0,0,0,0)',
           title: {         
             color: '#3b3b3b', 
             size: 12    
          },
        date: {
            color: '#3b3b3b',
            selectedColor: '#fff',
            selectedBg: '#a8d500',
            size: 12
        },
        today: {
            color: 'rgb(230,46,37)',
            bg: '#f00'
        },
    },
    specialDate: [{
        date: '2015-06-01'
    }],
    isLunarCalendar:true,
    fixedOn: api.frameName,
    fixed: false
}, function(ret, err) {
    if (ret) {
        alert(JSON.stringify(ret));
    } else {
        alert(JSON.stringify(err));
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setSpecialDates

设置特殊日期

setSpecialDates({params})

params

specialDates:

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

示例代码

var miCalendar = api.require('miCalendar');
miCalendar.setSpecialDates({
    specialDates: [{
        date: '2015-12-07',
        badge:''
    }, {
        date: '2015-12-08',
       badge:''
    }]
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

cancelSpecialDates

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

cancelSpecialDates({params})

params

specialDates:

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

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭日历

close()

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示日历

show()

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏日历

hide()

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

nextMonth

显示下个月

nextMonth(callback(ret))

callback(ret)

ret:

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

示例代码

var miCalendar = api.require('miCalendar');
miCalendar.nextMonth(function(ret, err) {
    if (ret) {
        alert(JSON.stringify(ret));
    } else {
        alert(JSON.stringify(err));
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

prevMonth

显示上个月

prevMonth(callback(ret))

callback(ret)

ret:

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

示例代码

var miCalendar = api.require('miCalendar');
miCalendar.prevMonth(function(ret, err) {
    if (ret) {
        alert(JSON.stringify(ret));
    } else {
        alert(JSON.stringify(err));
    }
});

可用性

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 对象
  • 内部字段:
{
    status: true        //布尔型;true||false
}

示例代码

var miCalendar = api.require('miCalendar');
miCalendar.setDate({
    date: '2015-08-08',
    ignoreSelected: false
}, function(ret, err) {
    if (ret.status) {
        alert(JSON.stringify(ret));
    } else {
        alert(JSON.stringify(err));
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本