Wijmo 更優美的jQuery UI部件集：活動日歷控件(Event Calendar)

　　Wijmo Event Calendar活動日歷控件，是一個功能齊全的活動日歷控件，允許用戶添加，編輯和管理他們的日程。默認情況下，控件將使用Html5的Local Storage特性，進行離線數據存儲，用戶可以在不連接網路的情況下，使用網頁來管理自己的日程，無需額外的配置。

　　Wijmo Event Calendar支持用戶自定義數據存儲方式。Wijmo Event Calendar 控件在設計之初就將數據展現和數據存儲進行分離，您可以使用amplify.store庫，實現本地數據存儲。然后設置：dataStorage，指定自定義的數據存儲層，設置visibleCalendars決定那些日歷需要顯示。

　　Wijmo Event Calendar 支持靈活的UI定制，自帶的Theme就很像 apple 的Calendar， 您可以顯示/隱藏標題欄，導航欄，狀態欄，右邊的窗口。

　　下面是默認UI：

Day View

 

Week View:

Month View:

List (Agenda) View

 

Wijmo Calendar http://wijmo.com/widgets/wijmo-complete/events-calendar/

API：http://wijmo.com/wiki/index.php/Events_Calendar

 

Wijmo Calendar 依賴下面的JavaScript庫:

jquery.ui.core.js

jquery.ui.widget.js

globalize.js

jquery.mousewheel.js

jquery.plugin.wijtextselection.js

jquery.wijmo.wijutil.js

jquery.wijmo.wijinputcore.js

jquery.wijmo.wijinputdate.js

jquery.wijmo.wijinputnumber.js

jquery.wijmo.wijcalendar.js

jquery.wijmo.wijdialog.js

jquery.wijmo.wijcombobox.js

jquery.wijmo.wijdatepager.js

 

 

需要進行用戶自定制數據存儲時，需要引入下面這兩個庫:

amplify.core.js

amplify.store.js

 

 

使用非常簡單的代碼就可以初始化一個Event Calendar了:

---------

$(document).ready(function () {

$("#eventscalendar").wijevcal();

});

 

----------

下載本文示例代碼.

 

Wijmo Event Calendar 還提供了其它強大的API, 使用戶可以方便的定制控件:

設置 Culture:

----------

$("#eventscalendar").wijevcal({ culture: " de-DE");

 

----------

設置 data source web service:

---------

$("#report").wijevcal({

webServiceUrl: "http://mysite/c1evcalservice.ashx"

});

 

--------

設置 星期的第一天:

--------

$("#eventscalendar").wijevcal({ firstDayOfWeek: 1 });

 

--------

設置 header Bar 是否顯示

-------

$("#element").wijevcal({ headerBarVisible: false });

 

-------

設置navigation Bar 是否顯示

-------

$("#element").wijevcal({navigationBarVisible: false });

 

-------

設置右邊 Panel 是否顯示

-------

$("#element").wijevcal({rightPaneVisible: false });

 

-------

還有很多其它實用的API:

http://wijmo.com/wiki/index.php/Events_Calendar

 

下載本文示例代碼

Wijmo下載，請進入Studio for ASP.NET Wijmo 2012 v1正式發布（2012.03.22更新）!