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 对象
  • 描述：（可选项）插件的位置及尺寸
  • 内部字段：
{
    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仅支持颜色设置)
    viewbg: 'rgba(0,0,0,0)',            //（可选项）字符串类型；整个view背景，支持 rgb、rgba、#；默认：'rgba(0,0,0,0)'（仅ios支持）
   cornerRadius:1,                  //（可选性）数字类型；设备当前日期和选中日期背景圆角；默认：1
   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

scrollEnabled：

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

isToday：

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

fixedOn：

  • 类型：字符串类型
  • 描述：（可选项）插件视图添加到指定 frame 的名字（只指 frame，传 window 无效）
  • 默认：插件依附于当前 window

fixed：

  • 类型：布尔
  • 描述：（可选项）插件是否随所属 window 或 frame 滚动
  • 默认值：true（不随之滚动）

callback(ret)

ret：

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

示例代码

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) {
        api.alert({msg: JSON.stringify(ret)});
    } else {
        api.alert({msg: 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) {
        api.alert({msg: JSON.stringify(ret)});
    } else {
        api.alert({msg: 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) {
        api.alert({msg: JSON.stringify(ret)});
    } else {
        api.alert({msg: 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) {
        api.alert({msg: JSON.stringify(ret)});
    } else {
        api.alert({msg: JSON.stringify(err)});
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24