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

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

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

　　下面是默認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
      
    

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

      
        amplify.core.js

amplify.store.js
      
    

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

---------

      $(document).ready(
      
        function
      
      
         () {

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

});
      
    

----------

下載本文示例代碼.

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

設(shè)置 Culture:

----------

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

----------

設(shè)置 data source web service:

---------

      $("#report"
      
        ).wijevcal({

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

});
      
    

--------

設(shè)置 星期的第一天:

--------

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

--------

設(shè)置 header Bar 是否顯示

-------

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

-------

設(shè)置navigation Bar 是否顯示

-------

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

-------

設(shè)置右邊 Panel 是否顯示

-------

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

-------

還有很多其它實用的API:

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

下載本文示例代碼

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

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