在上一篇文章中我們，給大家介紹了 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支持，你可以使日歷控件與你的組織標准相匹配。
最后，和大家分享一些 Wijmo 資源：
1.源碼下載（包含以上特性）:Wijmo-Calendar.zip
2.更多信息請參考：Wijmo 中文網站：http://www.gcpowertools.com.cn/products/c1_asp_overview.htm
3.開源Wijmo jQuery 討論社區： http://gcdn.grapecity.com/index.aspx
wijcalendar 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:newDate('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:newDate('2010/08/15')});
minDate
-
該值用來獲取或設置用於選擇的最小日期。
- Type: Date
- Default: new Date(1900/01/1)
- Code example:
-
$(".selector").wijcalendar({minDate:newDate('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.