Calendar（日历）

使用$.fn.iCalendar.defaults重写默认值对象。

日历控件显示一个月的日历，允许用户选择日期和移动到下一个或上一个月。默认情况下，一周的第一天是周日。它可以通过设置'firstDay'属性的值来更改设置。

使用案例

使用标签创建日历。

<div data-toggle="topjui-calendar" data-options="width:180;height:180;"></div>

使用Javascript创建日历。

<div id="cc" style="width:180px;height:180px;"></div>

$('#cc').iCalendar({
    current:new Date()
});

属性

属性名	属性值类型	描述	默认值
width	number	日历控件宽度。	180
height	number	日历控件高度。	180
fit	boolean	当设置为true的，将设置日历控件大小自适应父容器。	FALSE
border	boolean	定义是否显示边框。	TRUE
showWeek	boolean	当设置为true时，将显示周数。	FALSE
weekNumberHeader	string	周数的标签显示在头部。
getWeekNumber	function(date)	该函数用于返回周数值。
firstDay	number	定义一周的第一天是星期几。0=星期日、1=星期一 等。	0
weeks	array	显示的周列表内容。	['S','M','T','W','T','F','S']
months	array	显示的月列表内容。	['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug','Sep', 'Oct', 'Nov', 'Dec']
year	number	年日历。下面的例子显示了如何使用指定的年份和月份创建一个日历。见下方代码示例。	当前年份（4位数）
month	number	月日历。	当前月份（从1开始）
current	Date	当前日期。	当前日期
formatter	function(date)	日期格式化函数，返回日期值。见下方代码示例。
styler	function(date)	日历天的样式函数，返回行内样式或CSS样式表的Class名称。见下方代码示例。
validator	function(date)	验证器函数用于确定是否可以选择日历上的某一天，返回false将阻止选择当前天。见下方代码示例。

属性代码示例

year属性示例：

<div data-toggle="topjui-calendar" data-options="year:2012,month:6"></div>

formatter属性示例：

$('#cc').iCalendar({
    formatter: function(date){
        return date.getDate();
    }
})

styler属性示例：

$('#cc').iCalendar({
    styler: function(date){
        if (date.getDay() == 1){
            return 'background-color:#ccc';
            // 函数可以返回预定义的css class和预定义的行内样式
            // return {class:'r1', style:{'color:#fff'}};
        } else {
            return '';
        }
    }
})

validator属性示例：

$('#cc').iCalendar({
    validator: function(date){
        if (date.getDay() == 1) {
            return true;
        } else {
            return false;
        }
    }
})

事件

事件名	事件参数	描述
onSelect	date	在用户选择一天的时候触发。见下方代码示例。
onChange	new Date, oldDate	在用户更改日期的时候触发。

事件代码示例

onSelect事件示例：

$('#cc').iCalendar({
    onSelect: function(date){
        alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate());
    }
});

方法

方法名	方法参数	描述
options	none	返回参数对象。
resize	none	调整日历大小。
moveTo	date	移动日历到指定日期。见下方代码示例。

方法代码示例

moveTo方法示例：

$('#cc').iCalendar('moveTo', new Date(2012, 6, 1));