开放原子开发者工作坊

在上一篇文章中我们，给大家介绍了 Wijmo Slider-滑动条插件的特性及使用方法。感谢园子中朋友的支持，朋友们的支持给我们写这一系列文章提供了很大的动力。在这篇文章中我们将介绍 Calendar的特性及使用方法。 wijcalendar 即为 jQuery 中的日历插件。

如果你是第一次看本系列文章，那么还可以参考本系列的其他几篇文章，相信会给你带来更多惊喜：

• 不得不爱开源 Wijmo jQuery 插件集（1）-【开篇】(附演示和源码)
• 不得不爱开源 Wijmo jQuery 插件集（2）-【准备工作】(附30种Theme演示和源码)
• 不得不爱开源 Wijmo jQuery 插件集（3）-【Menu】(附页面展示和源码)
• 不得不爱开源 Wijmo jQuery 插件集（4）-【手风琴效果】(附页面展示和源码)
• 不得不爱开源 Wijmo jQuery 插件集（5）-【对话框】(附页面展示和源码)
• 不得不爱开源 Wijmo jQuery 插件集（6）-【Popup】(附页面展示和源码)
• 不得不爱开源 Wijmo jQuery 插件集（7）-【进度条】(附页面展示和源码)
• 不得不爱开源 Wijmo jQuery 插件集（8）-【滑动条】(附页面展示和源码)

首先让我们看看 Wijmo wijcalendar 给我们带来了哪些惊喜？

用ComponentOne为ASP.NET Wijmo出品的Calendar™控件来添加一个日历到你的网站。它可以显示单个月或几个月的一个表格，其中包含可自定义的风格和导航元素。

 

建立你的第一个 Wijmo jQuery Menu:
HTML 标签：

<div id="calendar1"></div>
jQuery 脚本：

<script type="text/javascript">

$(function () {

$("#calendar1").wijcalendar(

{ easing: "easeOutExpo" }

);

});

</script>

特性

选择模式

日历控件可以支持单个和多个日期选择。通过工作日和周数选择器你可以选择一组天数，比如，指向星期二的所有日子或一个特定星期的所有日子。使用月份选择器，你可以选择整个月的所有日子。

月预览

日历控件具有可选的预览窗格，可以显示上一个和下一个日历月。这可以使你能够在一个没有导航的月的开始或者结束时就查看日期时间。你只需要设置一个属性来启用此功能。

动画

当月份在顶部、底部、左侧或右侧之间发生交换时，日历控件包含了一种幻灯样式的内置动画效果。你可以通过设置一个属性来指定C1Calendar的动画效果的类型。

属性生成器

日历控件包含一个可以将日历的所有元素组织成逻辑组的属性生成器，所以你可以很容易地找到你要修改的特定元素，而不需要通过在“属性”窗口中滚动属性列表。此功能是为了帮助你的程序不执行重复性任务而设计的。

本土化

日历控件支持在工作日和日历标题上的全面本土化。在工作日和标题上显示的字符串取决于你指定的语言。

快速导航

日历控件包括三种通过日历月来进行导航的方法。“上一页” 和“下一页”的导航按钮可以使你去到上一个月或下一个月。“快速向前一页”和“快速向后一页”可以让你快速前进几个月或快速后退几个月。并且弹出的日历月选择器和年选择器可以使你能够从弹出的日历中选择月份和年份。

方向

在显示多个日历时，你可能需要改变日历的方向。日历控件可以允许你水平或垂直地显示日历。

多个视图

你可以通过在多个日历视图中简单地指明月份行或列的数值来在日历范围内中显示超过一个月的。

主题

只需点击一下智能标签，你就可以通过从六个溢价主题（北极，午夜时分，雅集，火箭，钴和英镑）中选择一个来更改日历的外观。另外，还可以使用jQuery UI中的ThemeRoller来创建一个自定义的主题！

CSS支持

你可以使用这一种级联样式表（CSS）的样式来定义自定义皮肤。有了CSS支持，你可以使日历控件与你的组织标准相匹配。

CSS支持

你可以使用这一种级联样式表（CSS）的样式来定义自定义皮肤。有了CSS支持，你可以使该滑块控件与你的组织标准相匹配。

最后，和大家分享一些 Wijmo 资源：

1.源码下载（包含以上特性）:Wijmo-ProcessBar.zip

2.更多信息请参考：Wijmo 中文网站：http://www.gcpowertools.com.cn/products/c1_asp_overview.htm

3.开源Wijmo jQuery 讨论社区： http://gcdn.grapecity.com/index.aspx

wijprogressbar API 介绍：(点击隐藏 API)

allowPreview

Type: Boolean

Default: false

Code example:

$(".selector").wijcalendar({

allowPreview: false

});

allowQuickPick

Type: Boolean

Default: true

Code example:

$(".selector").wijcalendar({

allowQuickPick: true

});

autoHide

Type: Boolean

Default: true

Code example:

$(".selector").wijcalendar({

autoHide: true

});

calendarWeekRule

Type: String

Default: ‘firstDay’

Possible values are: "firstDay", "firstFullWeek" or "firstFourDayWeek"

Code example:

$(".selector").wijcalendar({

calendarWeekRule: ‘firstDay’

});

culture

Type: String

Default: ‘’

Code example:

$(".selector").wijcalendar({

culture: “zh-CN”

});

customizeDate

该方法用于定制 day 单元格的内容，样式和属性。

Default: null

Type: Function

Code example:

$("#selector").wijcalendar({ customizeDate: function($daycell, date, dayType, hover, preview){ } });

Parameters:

daycell - jQuery object 代表被操作的单元格。

date - 单元格的日期。

daytype – day 的类型，Number 类型。

hover - 鼠标是否悬浮在单元格上。Boolean 类型。

preview - 是否渲染预览容器。 Object 类型。

Return Type - 如果单元格属性改变则返回 true。

dayCols

Type: Number

Default: 7

Code example:

$(".selector").wijcalendar({

dayCols: 7

});

dayRows

Type: Number

Default: 6

Code example:

$(".selector").wijcalendar({

dayRows: 6}

);

direction

Type: String

Default: ‘horizontal’

Possible values are: ‘horizontal’ or ‘vertical’

Code example:

$(".selector").wijcalendar({

direction: ‘horizontal’

});

displayDate

Type: Date

Default: undefined

Code example:

$(".selector").wijcalendar({

displayDate: new Date('1900/01/1')

});

duration

Type: Number

Default: 250

Code example:

$(".selector").wijcalendar({

duration: 250

});

easing

Type: String

Default: ‘easeInQuad’

Code example:

$(".selector").wijcalendar({

easing: ‘easeInQuad’

});

maxDate

Type: Date

Default: new Date(2099/12/31)

Code example:

$(".selector").wijcalendar({

maxDate: new Date('2010/08/15')

});

minDate

Type: Date

Default: new Date(1900/01/1)

Code example:

$(".selector").wijcalendar({

minDate: new Date('2010/08/1')

});

monthCols

Type: Number

Default: 1

Code example:

$(".selector").wijcalendar({

monthCols: 1

});

monthRows

Type: Number

Default: 1

Code example:

$(".selector").wijcalendar({

monthRows: 1

});

navButtons

Type: String

Default: 'default'

Note: This option can’t be used when the monthRows or monthCols option is greater than 1.

Code example:

$(".selector").wijcalendar({

navButtons: 'quick'

});

nextPreviewTooltip

Type: String

Default: ''

Code example:

$(".selector").wijcalendar({

nextPreviewTooltip: 'hello world'

});

nextTooltip

Type: String

Default: 'Next'

Code example:

$(".selector").wijcalendar({

nextTooltip: ‘Previous’

});

popupMode

Type: Boolean

Default: false

Code example:

$(".selector").wijcalendar({

popupMode: false

});

prevPreviewTooltip

Type: String

Default: ''

Code example:

$(".selector").wijcalendar({

prevPreviewTooltip: 'hello world'

});

prevTooltip

Type: String

Default: 'Previous'

Code example:

$(".selector").wijcalendar({

prevTooltip: ‘Previous’

});

quickNavStep

Type: Number

Default: 12

Note: This option can’t be used when the monthRows or monthCols option is greater than 1.

Code example:

$(".selector").wijcalendar({

quickNavStep: 12

});

quickNextTooltip

Type: String

Default: 'Quick Next'

Code example:

$(".selector").wijcalendar({

quickNextTooltip: 'Quick Next'

});

quickPrevTooltip

Type: String

Default: 'Quick Previous'

Code example:

$(".selector").wijcalendar({

quickPrevTooltip: 'Quick Previous'

});

selectionMode

Type: hash

Default: {day:true, days:true}

Possible fields in hash are: day, days, weekDay, weekNumber, month.

Code example:

$(".selector").wijcalendar({

selectionMode:{day:true, days:true}

});

showDayPadding

Type: Boolean

Default: false

Code example:

$(".selector").wijcalendar({

showDayPadding: true

});

showOtherMonthDays

Type: Boolean

Default: true

Code example:

$(".selector").wijcalendar({

showOtherMonthDays: true

});

showTitle

Type: Boolean

Default: true

Code example:

$(".selector").wijcalendar({

showTitle: true

});

showWeekDays

Type: Boolean

Default: true

Code example:

$(".selector").wijcalendar({

showWeekDays: true

});

showWeekNumbers

Type: Boolean

Default: true

Code example:

$(".selector").wijcalendar({

showWeekNumbers: true

});

titleFormat

Type: String

Default: "MMMM yyyy"

Code example:

$(".selector").wijcalendar({

titleFormat: "MMMM-yyyy"});

toolTipFormat

Type: String

Default: 'dddd, MMMM dd, yyyy'

Code example:

$(".selector").wijcalendar({

toolTipFormat: 'dddd, MMMM dd, yyyy'

});

weekDayFormat

Type: String

Default: 'short'

Code example:

$(".selector").wijcalendar({

weekDayFormat: ‘firstLetter’

});

Events

afterSelect

Default: null.

Type: Function.

Parameters:

e - Type is "Object. jQuery.Event object.

args - Type is "Object". The data with this event. args.date: The selected date.

Code example:

1

$("#element").wijcalendar({ afterSelect: function (e, args) { } });

afterSlide

Default: null

Type: Function

Parameter: e - Type is "Object. jQuery.Event object.

Code example:

$("#element").wijcalendar({ afterSlide: function (e) { } });

beforeSelect

Default: null.

Type: Function.

Parameters:

e - Type is "Object". jQuery.event object.

args - Type is "Object". The data with this event. args.date: The date to be selected.

Code example:

$("#element").wijcalendar({ beforeSelect: function (e, args) { } });

beforeSlide

Default: null

Type: Function.

Code example:

$("#element").wijcalendar({ beforeSlide: function (e) { } });

selectedDatesChanged

Default: null.

Type: Function.

Parameters:

e - Type is "Object. jQuery.Event object.

args - Type is "Object. The data with this event. args.dates: The array with all of the selected date objects.

Code example:

$("#element").wijcalendar({ selectedDatesChanged: function (e, args) { } });

title

一个回调方法，用于设置月视图的标题。

Default: null

Type: Function

Parameters:

date - Type is "Date". The display date of the month.

format - Type is "String". The title format. Determined by the options.

Return type: Type is "String". The customized title text.

Code example:

$("#element").wijcalendar({ title: function (e) { } });

Methods

close

如果允许弹出，则关闭当前弹出日历。

getDisplayDate

获取当前展示的有效日期。

getSelectedDate

获取当前选择日期。

isPopupShowing

设置是否支持弹出模式。

popup(position)

使日历在特定位置弹出。

Parameter:

position - The position object accepts the jQuery Position plugin. Please see http://jqueryui.com/demos/position/ for details on this parameter.

popupAt(x,y)

使日历在特定位置弹出。

Parameters: The popupAt property accepts the following parameters:

X – The X offset. This will be the horizontal position.

Y – the Y offset. This will be the vertical position.

refresh

刷新日历。

refreshDate(date)

刷新某一天。

Parameter:

date – the date to be refreshed.

selectDate(date)

选择特定日期。

Parameter:

date – The date to be selected.

unSelectAll

取消所有选择。

unSelectDate(date)

取消选择某天。

Parameter:

date – the date to be removed from the selectedDates collection.