[快快樂樂教學] YUI2 in 3 使用方法，以calendar widget 為例

YUI2 in 3 使用方法，以calendar widget 為例。

使用方法

Y.use('yui2-calendar', function (Y) {    
    var YAHOO,
        _cal,
        id       = 'calContent',     //指定的id
        pageDate = '9/30/2010',     //設定起始日期, 格式均為，月/日/年
        minDate  = '1/1/2010',        //設定最小日期
        maxDate  = '12/30/2010';    //設定最大日期
        
    YAHOO = Y.YUI2;
    _cal = new YAHOO.widget.Calendar(
        '_cal', 
        id,
        {
            pagedate: pageDate,
            mindate: minDate,
            maxdate: maxDate
        }
    );
    
    //    可以設定多國語系
    _cal.cfg.setProperty("MONTHS_LONG",   ["Jan", "Feb", "Mar", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]);
    _cal.cfg.setProperty("WEEKDAYS_SHORT", ["S", "M", "D", "M", "D", "F", "S"]);
    
    //    render 事件設定一定要在 render() 執行以前
    _cal.renderEvent.subscribe(_calendarRenderHandler, _cal, true);
    
    //    產生 calendar
    _cal.render();
    
    // 日期選取事件
    _cal.selectEvent.subscribe(_calendarSelectHandler, _cal, true);
    //    改變日期事件
    _cal.changePageEvent.subscribe(_calendarChangeHandler, _cal, true);
});

接下來解釋一下事件。（以下為YUI2 提供樂樂長的列表）

Event	Fires...	Arguments
selectEvent	...after a date is selected.	Array of date fields representing the dates that were selected. Example: [ [2008,8,1],[2006,8,2] ]
beforeSelectEvent	...when a date is selected, before processing the change.	N/A
deselectEvent	...after a date is deselected.	Array of date fields representing the dates that were deselected. Example: [ [2008,8,1],[2006,8,2] ]
beforeDeselectEvent	...when a date is deselected, before processing the change.	N/A
renderEvent	...after the Calendar is rendered.	N/A
beforeRenderEvent	...just before the Calendar is rendered.	N/A
changePageEvent	...when the Calendar navigates to a new month (page).	The date prior to the Calendar changing pages, and the new date after changing pages
clearEvent	...when the Calendar is cleared.	N/A
resetEvent	...when the Calendar is reset.	N/A
beforeHideEvent	...just before the Calendar is hidden. Returning false from a subscriber will prevent the Calendar from being hidden.	N/A
hideEvent	...after the Calendar is hidden.	N/A
beforeShowEvent	...just before the Calendar is shown. Returning false from a subscriber will stop the Calendar from being shown.	N/A
showEvent	...after the Calendar is shown.	N/A
beforeShowNavEvent	...just before the CalendarNavigator is shown. Returning false from a subscriber will stop the CalendarNavigator from being shown.	N/A
showNavEvent	...after the CalendarNavigator is shown.	N/A
beforeHideNavEvent	...just before the CalendarNavigator is hidden. Returning false from a subscriber will stop the CalendarNavigator from being hidden.	N/A
hideNavEvent	...after the CalendarNavigator is hidden.	N/A

主要傳送的參數可以參考如下：

選取事件

/*以下為日期選取事件 (when click some date)*/
_calendarSelectHandler = function (type, args, obj) {
    conlose.log(type);    //    目前事件的行為{String}
    var dates = args[0],    //    日期型態物件
        date = dates[0];    //    取得日期資料
        
    conlose.log(date[0], date[1], date[2]);    //輸出資料為 year, month, day
};

切換月份事件

/**
  *    @parm type  {目前行為String}, 
  *          dates {前一頁和目前的日期array},
  *          obj   {calendar 物件}
  */
_calendarChangeHandler = function (typ, dates, obj) {
    var oldDate = new Date(dates[0]),    //前一頁的日期
        newDate = new Date(dates[1]);    //目前的日期
    console.log(newDate.getMonth());
};

calendar執行事件(當月份切換也會執行此事件)

_calendarRenderHandler = function (arg1, arg2, obj) {
    //    arg1, arg2, obj = cal <-指的就是calendar 本身
};

總結:
雖然說大部分事件都是沒有傳入任何參數，不過經過測試，通常第一個參數指的是目前執行的狀態(event status)，第三個參數指行事曆物件本身(obj = cal)。

以上的是我自己嘗試的結果，當然還有其他nav, calendar group等強大功能還沒來得及測試，希望如果有心的人可以繼續補足。