UICalendar模块（日历）demo示例

YonBIP社区

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

点击进入模块详情

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="tephone=no,email=no,date=no,address=no">
<style type="text/css">
html{ background-color: white; }
header{ border-bottom: 1px solid #ccc; padding: 25px 0; }
span {
padding: 10px 15px;
margin: 10px;
display: inline-block;
background-color: #e8e8e8;
}
.hover{ opacity: .4; }
</style>
</head>
<body style="padding-bottom: 340px;">
<div class="main">
<header>
<h1>UICalendar</h1>
<mark>
使用前请详细阅读文档使用规则
</mark>
</header>
<span tapmode="hover" onclick="fnOpen()">open()</span>
<span tapmode="hover" onclick="fnSetSpecialDates()">setSpecialDates()</span>
<span tapmode="hover" onclick="fnCancelSpecialDates()">cancelSpecialDates()</span>
<span tapmode="hover" onclick="fnClose()">close()</span>
<span tapmode="hover" onclick="fnShow()">show()</span>
<span tapmode="hover" onclick="fnHide()">hide()</span>
<span tapmode="hover" onclick="fnNextMonth()">nextMonth()</span>
<span tapmode="hover" onclick="fnPrevMonth()">prevMonth()</span>
<span tapmode="hover" onclick="fnNextYear()">nextYear()</span>
<span tapmode="hover" onclick="fnPrevYear()">prevYear()</span>
<span tapmode="hover" onclick="fnSetDate()">setDate()</span>
<span tapmode="hover" onclick="fnTurnPage()">turnPage()</span>
</div>
</body>
<script type="text/javascript">
var UICalendar;
apiready = function() {
UICalendar = api.require('UICalendar');
};
function fnOpen(){
UICalendar.open({
rect: {
x: 30,
y: document.querySelector( '.main' ).offsetHeight,
w: api.frameWidth - 60,
h: 340
},
styles: {
bg: '#fff',
week: {
weekdayColor: '#3b3b3b',
weekendColor: '#a8d400',
size: 12
},
date: {
color: '#3b3b3b',
selectedColor: '#fff',
selectedBg: '#a8d500',
size: 12
},
today: {
color: 'rgb(230,46,37)',
bg: ''
},
specialDate: {
color: '#fff'
}
},
specialDate: [{
date: '2016-06-30'
}],
switchMode: 'vertical',
fixed: false
}, function(ret, err){
if( ret ){
alert( JSON.stringify( ret ) );
}else{
alert( JSON.stringify( err ) );
}
});
}
function fnSetSpecialDates(){
UICalendar.setSpecialDates({
specialDates:[{
date: '2016-05-29',
color: '#fff',
bg: '#0f0'
},{
date: '2016-05-31',
color: '#fff',
bg: '#0f0'
}]
});
}
function fnCancelSpecialDates(){
UICalendar.cancelSpecialDates({
specialDates:['2016-05-29','2016-05-31']
});
}
function fnClose(){
UICalendar.close();
}
function fnShow(){
UICalendar.show();
}
function fnHide(){
UICalendar.hide();
}
function fnNextMonth(){
UICalendar.nextMonth(function(ret, err){
if( ret ){
alert( JSON.stringify( ret ) );
}else{
alert( JSON.stringify( err ) );
}
});
}
function fnPrevMonth(){
UICalendar.prevMonth(function(ret, err){
if( ret ){
alert( JSON.stringify( ret ) );
}else{
alert( JSON.stringify( err ) );
}
});
}
function fnNextYear(){
UICalendar.nextYear(function(ret, err){
if( ret ){
alert( JSON.stringify( ret ) );
}else{
alert( JSON.stringify( err ) );
}
});
}
function fnPrevYear(){
UICalendar.prevYear(function(ret, err){
if( ret ){
alert( JSON.stringify( ret ) );
}else{
alert( JSON.stringify( err ) );
}
});
}
function fnSetDate(){
UICalendar.setDate({
date: '2015-08-08',
ignoreSelected: false
}, function(ret, err){
if( ret.status ){
alert( JSON.stringify( ret ) );
}else{
alert( JSON.stringify( err ) );
}
});
}
function fnTurnPage(){
UICalendar.turnPage({
date: '2015-08'
});
}
</script>
</html>

复制代码

config.xml

<?xml version="1.0" encoding="UTF-8"?>
<widget id="A6903177269708" version="0.0.1">
<name>test</name>
<description>Example For APICloud.</description>
<author email="developer@apicloud.com" href="http://www.apicloud.com">Developer</author>
<content src="index.html"/>
<preference name="appBackground" value="rgba(255, 255, 255, 1)"/>
<preference name="windowBackground" value="rgba(0,0,0,0)"/>
<preference name="frameBackgroundColor" value="rgba(0,0,0,0)"/>
<preference name="autoLaunch" value="true"/>
<preference name="autoUpdate" value="true"/>
<preference name="smartUpdate" value="false"/>
<preference name="fullScreen" value="false"/>
<preference name="debug" value="true"/>
<preference name="statusBarAppearance" value="true"/>
<permission name="location"/>
<permission name="internet"/>
<access origin="*"/>
</widget>

复制代码

tanjingwaini

抢沙发。回帖拿金币，支持支持

huanyun-c

回帖拿金币，支持支持

kangjun

回帖拿金币，支持支持

神奇的一颗蛋

帖拿金币，支持支持

顽皮的大叔

感觉样式不好看

黄维荣

捡个云币

我喜欢￥

我就是来拿云币的，从来不掩饰自己的目的

暗夜似景

支持，有币必回

:L:L:L:L

SilenceShui

回帖拿金币，支持支持

UICalendar模块（日历）demo示例

回帖奖励 +1 Y币

回帖奖励 +1 Y币

回帖奖励 +1 Y币

回帖奖励 +1 Y币

回帖奖励 +1 Y币

回帖奖励 +1 Y币

回帖奖励 +1 Y币

回帖奖励 +1 Y币

回帖奖励 +1 Y币