File: calendar/js/calendar-base.js

/**
 * The CalendarBase submodule is a basic UI calendar view that displays
 * a range of dates in a two-dimensional month grid, with one or more
 * months visible at a single time. CalendarBase supports custom date
 * rendering, multiple calendar panes, and selection.
 * @module calendar
 * @submodule calendar-base
 */
 
var getCN                 = Y.ClassNameManager.getClassName,
    CALENDAR              = 'calendar',
    CAL_GRID              = getCN(CALENDAR, 'grid'),
    CAL_LEFT_GRID         = getCN(CALENDAR, 'left-grid'),
    CAL_RIGHT_GRID        = getCN(CALENDAR, 'right-grid'),
    CAL_BODY              = getCN(CALENDAR, 'body'),
    CAL_HD                = getCN(CALENDAR, 'header'),
    CAL_HD_LABEL          = getCN(CALENDAR, 'header-label'),
    CAL_WDAYROW           = getCN(CALENDAR, 'weekdayrow'),
    CAL_WDAY              = getCN(CALENDAR, 'weekday'),
    CAL_COL_HIDDEN        = getCN(CALENDAR, 'column-hidden'),
    CAL_DAY_SELECTED      = getCN(CALENDAR, 'day-selected'),
    SELECTION_DISABLED    = getCN(CALENDAR, 'selection-disabled'),
    CAL_ROW               = getCN(CALENDAR, 'row'),
    CAL_DAY               = getCN(CALENDAR, 'day'),
    CAL_PREVMONTH_DAY     = getCN(CALENDAR, 'prevmonth-day'),
    CAL_NEXTMONTH_DAY     = getCN(CALENDAR, 'nextmonth-day'),
    CAL_ANCHOR            = getCN(CALENDAR, 'anchor'),
    CAL_PANE              = getCN(CALENDAR, 'pane'),
    CAL_STATUS            = getCN(CALENDAR, 'status'),
    L           = Y.Lang,
    substitute  = L.sub,
    arrayEach   = Y.Array.each,
    objEach     = Y.Object.each,
    iOf         = Y.Array.indexOf,
    hasKey      = Y.Object.hasKey,
    setVal      = Y.Object.setValue,
    isEmpty     = Y.Object.isEmpty,
    ydate       = Y.DataType.Date;
 
/** Create a calendar view to represent a single or multiple
    * month range of dates, rendered as a grid with date and
    * weekday labels.
    *
    * @class CalendarBase
    * @extends Widget
    * @param config {Object} Configuration object (see Configuration
    * attributes)
    * @constructor
    */
function CalendarBase() {
    CalendarBase.superclass.constructor.apply ( this, arguments );
}
 
 
 
Y.CalendarBase = Y.extend( CalendarBase, Y.Widget, {
 
    /**
     * A storage for various properties of individual month
     * panes.
     *
     * @property _paneProperties
     * @type Object
     * @private
     */
    _paneProperties : {},
 
    /**
     * The number of month panes in the calendar, deduced
     * from the CONTENT_TEMPLATE's number of {calendar_grid}
     * tokens.
     *
     * @property _paneNumber
     * @type Number
     * @private
     */
    _paneNumber : 1,
 
    /**
     * The unique id used to prefix various elements of this
     * calendar instance.
     *
     * @property _calendarId
     * @type String
     * @private
     */
    _calendarId : null,
 
    /**
     * The hash map of selected dates, populated with
     * selectDates() and deselectDates() methods
     *
     * @property _selectedDates
     * @type Object
     * @private
     */
    _selectedDates : {},
 
    /**
     * A private copy of the rules object, populated
     * by setting the customRenderer attribute.
     *
     * @property _rules
     * @type Object
     * @private
     */
    _rules : {},
 
    /**
     * A private copy of the filterFunction, populated
     * by setting the customRenderer attribute.
     *
     * @property _filterFunction
     * @type Function
     * @private
     */
    _filterFunction : null,
 
    /**
     * Storage for calendar cells modified by any custom
     * formatting. The storage is cleared, used to restore
     * cells to the original state, and repopulated accordingly
     * when the calendar is rerendered.
     *
     * @property _storedDateCells
     * @type Object
     * @private
     */
    _storedDateCells : {},
 
    /**
     * Designated initializer
     * Initializes instance-level properties of
     * calendar.
     *
     * @method initializer
     */
    initializer : function () {
        this._paneProperties = {};
        this._calendarId = Y.guid('calendar');
        this._selectedDates = {};
        if (isEmpty(this._rules)) {
             this._rules = {};
        }
        this._storedDateCells = {};
    },
 
    /**
     * renderUI implementation
     *
     * Creates a visual representation of the calendar based on existing parameters.
     * @method renderUI
     */
    renderUI : function () {
 
        var contentBox = this.get('contentBox');
        contentBox.appendChild(this._initCalendarHTML(this.get('date')));
 
        if (this.get('showPrevMonth')) {
                this._afterShowPrevMonthChange();
        }
        if (this.get('showNextMonth')) {
                this._afterShowNextMonthChange();
        }
 
        this._renderCustomRules();
        this._renderSelectedDates();
 
        this.get("boundingBox").setAttribute("aria-labelledby", this._calendarId + "_header");
 
    },
 
    /**
     * bindUI implementation
     *
     * Assigns listeners to relevant events that change the state
     * of the calendar.
     * @method bindUI
     */
    bindUI : function () {
        this.after('dateChange', this._afterDateChange);
        this.after('showPrevMonthChange', this._afterShowPrevMonthChange);
        this.after('showNextMonthChange', this._afterShowNextMonthChange);
        this.after('headerRendererChange', this._afterHeaderRendererChange);
        this.after('customRendererChange', this._afterCustomRendererChange);
        this.after('enabledDatesRuleChange', this._afterCustomRendererChange);
        this.after('disabledDatesRuleChange', this._afterCustomRendererChange);
        this.after('focusedChange', this._afterFocusedChange);
        this.after('selectionChange', this._renderSelectedDates);
        this._bindCalendarEvents();
    },
 
 
    /**
     * An internal utility method that generates a list of selected dates
     * from the hash storage.
     *
     * @method _getSelectedDatesList
     * @protected
     * @return {Array} The array of `Date`s that are currently selected.
     */
    _getSelectedDatesList : function () {
        var output = [];
 
        objEach (this._selectedDates, function (year) {
            objEach (year, function (month) {
                objEach (month, function (day) {
                    output.push (day);
                }, this);
            }, this);
        }, this);
 
        return output;
    },
 
    /**
     * A utility method that returns all dates selected in a specific month.
     *
     * @method _getSelectedDatesInMonth
     * @param {Date} oDate corresponding to the month for which selected dates
     * are requested.
     * @protected
     * @return {Array} The array of `Date`s in a given month that are currently selected.
     */
    _getSelectedDatesInMonth : function (oDate) {
        var year = oDate.getFullYear(),
            month = oDate.getMonth();
 
        if (hasKey(this._selectedDates, year) && hasKey(this._selectedDates[year], month)) {
            return Y.Object.values(this._selectedDates[year][month]);
        } else {
            return [];
        }
    },
 
 
    /**
     * An internal parsing method that receives a String list of numbers
     * and number ranges (of the form "1,2,3,4-6,7-9,10,11" etc.) and checks
     * whether a specific number is included in this list. Used for looking
     * up dates in the customRenderer rule set.
     *
     * @method _isNumInList
     * @param {Number} num The number to look for in a list.
     * @param {String} strList The list of numbers of the form "1,2,3,4-6,7-8,9", etc.
     * @private
     * @return {boolean} Returns true if the given number is in the given list.
     */
    _isNumInList : function (num, strList) {
        if (strList === "all") {
            return true;
        } else {
            var elements = strList.split(","),
                i = elements.length,
                range;
 
            while (i--) {
                range = elements[i].split("-");
                if (range.length === 2 && num >= parseInt(range[0], 10) && num <= parseInt(range[1], 10)) {
                    return true;
                }
                else if (range.length === 1 && (parseInt(elements[i], 10) === num)) {
                    return true;
                }
            }
            return false;
        }
    },
 
    /**
     * Given a specific date, returns an array of rules (from the customRenderer rule set)
     * that the given date matches.
     *
     * @method _getRulesForDate
     * @param {Date} oDate The date for which an array of rules is needed
     * @private
     * @return {Array} Returns an array of `String`s, each containg the name of
     * a rule that the given date matches.
     */
    _getRulesForDate : function (oDate) {
        var year = oDate.getFullYear(),
                month = oDate.getMonth(),
                date = oDate.getDate(),
                wday = oDate.getDay(),
                rules = this._rules,
                outputRules = [],
                years, months, dates, days;
 
        for (years in rules) {
            if (this._isNumInList(year, years)) {
                if (L.isString(rules[years])) {
                        outputRules.push(rules[years]);
                }
                else {
                    for (months in rules[years]) {
                        if (this._isNumInList(month, months)) {
                            if (L.isString(rules[years][months])) {
                                    outputRules.push(rules[years][months]);
                            }
                            else {
                                for (dates in rules[years][months]) {
                                    if (this._isNumInList(date, dates)) {
                                        if (L.isString(rules[years][months][dates])) {
                                                outputRules.push(rules[years][months][dates]);
                                        }
                                        else {
                                            for (days in rules[years][months][dates]) {
                                                if (this._isNumInList(wday, days)) {
                                                    if (L.isString(rules[years][months][dates][days])) {
                                                        outputRules.push(rules[years][months][dates][days]);
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        return outputRules;
    },
 
    /**
     * A utility method which, given a specific date and a name of the rule,
     * checks whether the date matches the given rule.
     *
     * @method _matchesRule
     * @param {Date} oDate The date to check
     * @param {String} rule The name of the rule that the date should match.
     * @private
     * @return {boolean} Returns true if the date matches the given rule.
     *
     */
    _matchesRule : function (oDate, rule) {
        return (iOf(this._getRulesForDate(oDate), rule) >= 0);
    },
 
    /**
     * A utility method which checks whether a given date matches the `enabledDatesRule`
     * or does not match the `disabledDatesRule` and therefore whether it can be selected.
     * @method _canBeSelected
     * @param {Date} oDate The date to check
     * @private
     * @return {boolean} Returns true if the date can be selected; false otherwise.
     */
    _canBeSelected : function (oDate) {
 
        var enabledDatesRule = this.get("enabledDatesRule"),
            disabledDatesRule = this.get("disabledDatesRule");
 
        if (enabledDatesRule) {
            return this._matchesRule(oDate, enabledDatesRule);
        } else if (disabledDatesRule) {
            return !this._matchesRule(oDate, disabledDatesRule);
        } else {
            return true;
        }
    },
 
    /**
     * Selects a given date or array of dates.
     * @method selectDates
     * @param {Date|Array} dates A `Date` or `Array` of `Date`s.
     * @return {CalendarBase} A reference to this object
     * @chainable
     */
    selectDates : function (dates) {
        if (ydate.isValidDate(dates)) {
            this._addDateToSelection(dates);
        }
        else if (L.isArray(dates)) {
            this._addDatesToSelection(dates);
        }
        return this;
    },
 
    /**
     * Deselects a given date or array of dates, or deselects
     * all dates if no argument is specified.
     * @method deselectDates
     * @param {Date|Array} [dates] A `Date` or `Array` of `Date`s, or no
     * argument if all dates should be deselected.
     * @return {CalendarBase} A reference to this object
     * @chainable
     */
    deselectDates : function (dates) {
        if (!dates) {
            this._clearSelection();
        }
        else if (ydate.isValidDate(dates)) {
            this._removeDateFromSelection(dates);
        }
        else if (L.isArray(dates)) {
            this._removeDatesFromSelection(dates);
        }
        return this;
    },
 
    /**
     * A utility method that adds a given date to selection..
     * @method _addDateToSelection
     * @param {Date} oDate The date to add to selection.
     * @param {Number} [index] An optional parameter that is used
     * to differentiate between individual date selections and multiple
     * date selections.
     * @private
     */
    _addDateToSelection : function (oDate, index) {
        oDate = this._normalizeTime(oDate);
 
        if (this._canBeSelected(oDate)) {
 
            var year = oDate.getFullYear(),
                month = oDate.getMonth(),
                day = oDate.getDate();
 
            if (hasKey(this._selectedDates, year)) {
                if (hasKey(this._selectedDates[year], month)) {
                    this._selectedDates[year][month][day] = oDate;
                } else {
                    this._selectedDates[year][month] = {};
                    this._selectedDates[year][month][day] = oDate;
                }
            } else {
                this._selectedDates[year] = {};
                this._selectedDates[year][month] = {};
                this._selectedDates[year][month][day] = oDate;
            }
 
            this._selectedDates = setVal(this._selectedDates, [year, month, day], oDate);
 
            if (!index) {
                this._fireSelectionChange();
            }
        }
    },
 
    /**
     * A utility method that adds a given list of dates to selection.
     * @method _addDatesToSelection
     * @param {Array} datesArray The list of dates to add to selection.
     * @private
     */
    _addDatesToSelection : function (datesArray) {
        arrayEach(datesArray, this._addDateToSelection, this);
        this._fireSelectionChange();
    },
 
    /**
     * A utility method that adds a given range of dates to selection.
     * @method _addDateRangeToSelection
     * @param {Date} startDate The first date of the given range.
     * @param {Date} endDate The last date of the given range.
     * @private
     */
    _addDateRangeToSelection : function (startDate, endDate) {
 
        var timezoneDifference = (endDate.getTimezoneOffset() - startDate.getTimezoneOffset())*60000,
            startTime = startDate.getTime(),
            endTime   = endDate.getTime(),
            tempTime,
            time,
            addedDate;
 
        if (startTime > endTime) {
            tempTime = startTime;
            startTime = endTime;
            endTime = tempTime + timezoneDifference;
        } else {
            endTime = endTime - timezoneDifference;
        }
 
 
        for (time = startTime; time <= endTime; time += 86400000) {
            addedDate = new Date(time);
            addedDate.setHours(12);
            this._addDateToSelection(addedDate, time);
        }
        this._fireSelectionChange();
    },
 
    /**
     * A utility method that removes a given date from selection..
     * @method _removeDateFromSelection
     * @param {Date} oDate The date to remove from selection.
     * @param {Number} [index] An optional parameter that is used
     * to differentiate between individual date selections and multiple
     * date selections.
     * @private
     */
    _removeDateFromSelection : function (oDate, index) {
        var year = oDate.getFullYear(),
            month = oDate.getMonth(),
            day = oDate.getDate();
 
        if (hasKey(this._selectedDates, year) &&
            hasKey(this._selectedDates[year], month) &&
            hasKey(this._selectedDates[year][month], day)
        ) {
            delete this._selectedDates[year][month][day];
            if (!index) {
                this._fireSelectionChange();
            }
        }
    },
 
    /**
     * A utility method that removes a given list of dates from selection.
     * @method _removeDatesFromSelection
     * @param {Array} datesArray The list of dates to remove from selection.
     * @private
     */
    _removeDatesFromSelection : function (datesArray) {
        arrayEach(datesArray, this._removeDateFromSelection, this);
        this._fireSelectionChange();
    },
 
    /**
     * A utility method that removes a given range of dates from selection.
     * @method _removeDateRangeFromSelection
     * @param {Date} startDate The first date of the given range.
     * @param {Date} endDate The last date of the given range.
     * @private
     */
    _removeDateRangeFromSelection : function (startDate, endDate) {
        var startTime = startDate.getTime(),
            endTime   = endDate.getTime(),
            time;
 
        for (time = startTime; time <= endTime; time += 86400000) {
            this._removeDateFromSelection(new Date(time), time);
        }
 
        this._fireSelectionChange();
    },
 
    /**
     * A utility method that removes all dates from selection.
     * @method _clearSelection
     * @param {boolean} noevent A Boolean specifying whether a selectionChange
     * event should be fired. If true, the event is not fired.
     * @private
     */
    _clearSelection : function (noevent) {
        this._selectedDates = {};
        this.get("contentBox").all("." + CAL_DAY_SELECTED).removeClass(CAL_DAY_SELECTED).setAttribute("aria-selected", false);
        if (!noevent) {
            this._fireSelectionChange();
        }
    },
 
    /**
     * A utility method that fires a selectionChange event.
     * @method _fireSelectionChange
     * @private
     */
    _fireSelectionChange : function () {
 
        /**
        * Fired when the set of selected dates changes. Contains a payload with
        * a `newSelection` property with an array of selected dates.
        *
        * @event selectionChange
        */
        this.fire("selectionChange", {newSelection: this._getSelectedDatesList()});
    },
 
    /**
     * A utility method that restores cells modified by custom formatting.
     * @method _restoreModifiedCells
     * @private
     */
    _restoreModifiedCells : function () {
        var contentbox = this.get("contentBox"),
            id;
        for (id in this._storedDateCells) {
            contentbox.one("#" + id).replace(this._storedDateCells[id]);
            delete this._storedDateCells[id];
        }
    },
 
    /**
     * A rendering assist method that renders all cells modified by the customRenderer
     * rules, as well as the enabledDatesRule and disabledDatesRule.
     * @method _renderCustomRules
     * @private
     */
    _renderCustomRules : function () {
 
        this.get("contentBox").all("." + CAL_DAY + ",." + CAL_NEXTMONTH_DAY).removeClass(SELECTION_DISABLED).setAttribute("aria-disabled", false);
 
        if (!isEmpty(this._rules)) {
            var paneNum,
                paneDate,
                dateArray;
 
            for (paneNum = 0; paneNum < this._paneNumber; paneNum++) {
                paneDate = ydate.addMonths(this.get("date"), paneNum);
                dateArray = ydate.listOfDatesInMonth(paneDate);
                arrayEach(dateArray, Y.bind(this._renderCustomRulesHelper, this));
            }
        }
    },
 
    /**
    * A handler for a date selection event (either a click or a keyboard
    *   selection) that adds the appropriate CSS class to a specific DOM
    *   node corresponding to the date and sets its aria-selected
    *   attribute to true.
    *
    * @method _renderCustomRulesHelper
    * @private
    */
    _renderCustomRulesHelper: function (date) {
        var enRule = this.get("enabledDatesRule"),
            disRule = this.get("disabledDatesRule"),
            matchingRules,
            dateNode;
 
        matchingRules = this._getRulesForDate(date);
        if (matchingRules.length > 0) {
            if ((enRule && iOf(matchingRules, enRule) < 0) || (!enRule && disRule && iOf(matchingRules, disRule) >= 0)) {
                this._disableDate(date);
            }
 
            if (L.isFunction(this._filterFunction)) {
                dateNode = this._dateToNode(date);
                this._storedDateCells[dateNode.get("id")] = dateNode.cloneNode(true);
                this._filterFunction (date, dateNode, matchingRules);
            }
        } else if (enRule) {
            this._disableDate(date);
        }
    },
 
    /**
     * A rendering assist method that renders all cells that are currently selected.
     * @method _renderSelectedDates
     * @private
     */
    _renderSelectedDates : function () {
        this.get("contentBox").all("." + CAL_DAY_SELECTED).removeClass(CAL_DAY_SELECTED).setAttribute("aria-selected", false);
 
        var paneNum,
            paneDate,
            dateArray;
 
        for (paneNum = 0; paneNum < this._paneNumber; paneNum++) {
            paneDate = ydate.addMonths(this.get("date"), paneNum);
            dateArray = this._getSelectedDatesInMonth(paneDate);
 
            arrayEach(dateArray, Y.bind(this._renderSelectedDatesHelper, this));
        }
    },
 
    /**
    * Takes in a date and determines whether that date has any rules
    *   matching it in the customRenderer; then calls the specified
    *   filterFunction if that's the case and/or disables the date
    *   if the rule is specified as a disabledDatesRule.
    *
    * @method _renderSelectedDatesHelper
    * @private
    */
    _renderSelectedDatesHelper: function (date) {
        this._dateToNode(date).addClass(CAL_DAY_SELECTED).setAttribute("aria-selected", true);
    },
 
    /**
     * Add the selection-disabled class and aria-disabled attribute to a node corresponding
     * to a given date.
     *
     * @method _disableDate
     * @param {Date} date The date to disable
     * @private
     */
    _disableDate: function (date) {
       this._dateToNode(date).addClass(SELECTION_DISABLED).setAttribute("aria-disabled", true);
    },
 
    /**
     * A utility method that converts a date to the node wrapping the calendar cell
     * the date corresponds to..
     * @method _dateToNode
     * @param {Date} oDate The date to convert to Node
     * @protected
     * @return {Node} The node wrapping the DOM element of the cell the date
     * corresponds to.
     */
    _dateToNode : function (oDate) {
        var day = oDate.getDate(),
            col = 0,
            daymod = day%7,
            paneNum = (12 + oDate.getMonth() - this.get("date").getMonth()) % 12,
            paneId = this._calendarId + "_pane_" + paneNum,
            cutoffCol = this._paneProperties[paneId].cutoffCol;
 
        switch (daymod) {
            case (0):
                if (cutoffCol >= 6) {
                    col = 12;
                } else {
                    col = 5;
                }
                break;
            case (1):
                    col = 6;
                break;
            case (2):
                if (cutoffCol > 0) {
                    col = 7;
                } else {
                    col = 0;
                }
                break;
            case (3):
                if (cutoffCol > 1) {
                    col = 8;
                } else {
                    col = 1;
                }
                break;
            case (4):
                if (cutoffCol > 2) {
                    col = 9;
                } else {
                    col = 2;
                }
                break;
            case (5):
                if (cutoffCol > 3) {
                    col = 10;
                } else {
                    col = 3;
                }
                break;
            case (6):
                if (cutoffCol > 4) {
                    col = 11;
                } else {
                    col = 4;
                }
                break;
        }
        return(this.get("contentBox").one("#" + this._calendarId + "_pane_" + paneNum + "_" + col + "_" + day));
 
    },
 
    /**
     * A utility method that converts a node corresponding to the DOM element of
     * the cell for a particular date to that date.
     * @method _nodeToDate
     * @param {Node} oNode The Node wrapping the DOM element of a particular date cell.
     * @protected
     * @return {Date} The date corresponding to the DOM element that the given node wraps.
     */
    _nodeToDate : function (oNode) {
 
        var idParts = oNode.get("id").split("_").reverse(),
            paneNum = parseInt(idParts[2], 10),
            day  = parseInt(idParts[0], 10),
            shiftedDate = ydate.addMonths(this.get("date"), paneNum),
            year = shiftedDate.getFullYear(),
            month = shiftedDate.getMonth();
 
        return new Date(year, month, day, 12, 0, 0, 0);
    },
 
    /**
     * A placeholder method, called from bindUI, to bind the Calendar events.
     * @method _bindCalendarEvents
     * @protected
     */
    _bindCalendarEvents : function () {},
 
    /**
     * A utility method that normalizes a given date by converting it to the 1st
     * day of the month the date is in, with the time set to noon.
     * @method _normalizeDate
     * @param {Date} oDate The date to normalize
     * @protected
     * @return {Date} The normalized date, set to the first of the month, with time
     * set to noon.
     */
    _normalizeDate : function (date) {
        if (date) {
            return new Date(date.getFullYear(), date.getMonth(), 1, 12, 0, 0, 0);
        } else {
            return null;
        }
    },
 
    /**
     * A utility method that normalizes a given date by setting its time to noon.
     * @method _normalizeTime
     * @param {Date} oDate The date to normalize
     * @protected
     * @return {Date} The normalized date
     * set to noon.
     */
    _normalizeTime : function (date) {
        if (date) {
            return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 12, 0, 0, 0);
        } else {
            return null;
        }
    },
 
 
    /**
     * A render assist utility method that computes the cutoff column for the calendar
     * rendering mask.
     * @method _getCutoffColumn
     * @param {Date} date The date of the month grid to compute the cutoff column for.
     * @param {Number} firstday The first day of the week (modified by internationalized calendars)
     * @private
     * @return {Number} The number of the cutoff column.
     */
    _getCutoffColumn : function (date, firstday) {
        var distance = this._normalizeDate(date).getDay() - firstday,
            cutOffColumn = 6 - (distance + 7) % 7;
        return cutOffColumn;
    },
 
    /**
     * A render assist method that turns on the view of the previous month's dates
     * in a given calendar pane.
     * @method _turnPrevMonthOn
     * @param {Node} pane The calendar pane that needs its previous month's dates view
     * modified.
     * @protected
     */
    _turnPrevMonthOn : function (pane) {
        var pane_id = pane.get("id"),
            pane_date = this._paneProperties[pane_id].paneDate,
            daysInPrevMonth = ydate.daysInMonth(ydate.addMonths(pane_date, -1)),
            cell;
 
        if (!this._paneProperties[pane_id].hasOwnProperty("daysInPrevMonth")) {
            this._paneProperties[pane_id].daysInPrevMonth = 0;
        }
 
        if (daysInPrevMonth !== this._paneProperties[pane_id].daysInPrevMonth) {
 
            this._paneProperties[pane_id].daysInPrevMonth = daysInPrevMonth;
 
            for (cell = 5; cell >= 0; cell--) {
                pane.one("#" + pane_id + "_" + cell + "_" + (cell-5)).set('text', daysInPrevMonth--);
            }
        }
    },
 
    /**
     * A render assist method that turns off the view of the previous month's dates
     * in a given calendar pane.
     * @method _turnPrevMonthOff
     * @param {Node} pane The calendar pane that needs its previous month's dates view
     * modified.
     * @protected
     */
    _turnPrevMonthOff : function (pane) {
        var pane_id = pane.get("id"),
            cell;
 
        this._paneProperties[pane_id].daysInPrevMonth = 0;
 
        for (cell = 5; cell >= 0; cell--) {
            pane.one("#" + pane_id + "_" + cell + "_" + (cell-5)).setContent("&nbsp;");
        }
    },
 
    /**
     * A render assist method that cleans up the last few cells in the month grid
     * when the number of days in the month changes.
     * @method _cleanUpNextMonthCells
     * @param {Node} pane The calendar pane that needs the last date cells cleaned up.
     * @private
     */
    _cleanUpNextMonthCells : function (pane) {
        var pane_id = pane.get("id");
            pane.one("#" + pane_id + "_6_29").removeClass(CAL_NEXTMONTH_DAY);
            pane.one("#" + pane_id + "_7_30").removeClass(CAL_NEXTMONTH_DAY);
            pane.one("#" + pane_id + "_8_31").removeClass(CAL_NEXTMONTH_DAY);
            pane.one("#" + pane_id + "_0_30").removeClass(CAL_NEXTMONTH_DAY);
            pane.one("#" + pane_id + "_1_31").removeClass(CAL_NEXTMONTH_DAY);
    },
 
    /**
     * A render assist method that turns on the view of the next month's dates
     * in a given calendar pane.
     * @method _turnNextMonthOn
     * @param {Node} pane The calendar pane that needs its next month's dates view
     * modified.
     * @protected
     */
    _turnNextMonthOn : function (pane) {
        var dayCounter = 1,
            pane_id = pane.get("id"),
            daysInMonth = this._paneProperties[pane_id].daysInMonth,
            cutoffCol = this._paneProperties[pane_id].cutoffCol,
            cell,
            startingCell;
 
        for (cell = daysInMonth - 22; cell < cutoffCol + 7; cell++) {
            pane.one("#" + pane_id + "_" + cell + "_" + (cell+23)).set("text", dayCounter++).addClass(CAL_NEXTMONTH_DAY);
        }
 
        startingCell = cutoffCol;
 
        if (daysInMonth === 31 && (cutoffCol <= 1)) {
            startingCell = 2;
        } else if (daysInMonth === 30 && cutoffCol === 0) {
            startingCell = 1;
        }
 
        for (cell = startingCell ; cell < cutoffCol + 7; cell++) {
            pane.one("#" + pane_id + "_" + cell + "_" + (cell+30)).set("text", dayCounter++).addClass(CAL_NEXTMONTH_DAY);
        }
    },
 
    /**
     * A render assist method that turns off the view of the next month's dates
     * in a given calendar pane.
     * @method _turnNextMonthOff
     * @param {Node} pane The calendar pane that needs its next month's dates view
     * modified.
     * @protected
     */
    _turnNextMonthOff : function (pane) {
            var pane_id = pane.get("id"),
                daysInMonth = this._paneProperties[pane_id].daysInMonth,
                cutoffCol = this._paneProperties[pane_id].cutoffCol,
                cell,
                startingCell;
 
            for (cell = daysInMonth - 22; cell <= 12; cell++) {
                pane.one("#" + pane_id + "_" + cell + "_" + (cell+23)).setContent("&nbsp;").addClass(CAL_NEXTMONTH_DAY);
            }
 
            startingCell = 0;
 
            if (daysInMonth === 31 && (cutoffCol <= 1)) {
                startingCell = 2;
            } else if (daysInMonth === 30 && cutoffCol === 0) {
                startingCell = 1;
            }
 
            for (cell = startingCell ; cell <= 12; cell++) {
                pane.one("#" + pane_id + "_" + cell + "_" + (cell+30)).setContent("&nbsp;").addClass(CAL_NEXTMONTH_DAY);
            }
    },
 
    /**
     * The handler for the change in the showNextMonth attribute.
     * @method _afterShowNextMonthChange
     * @private
     */
    _afterShowNextMonthChange : function () {
 
        var contentBox = this.get('contentBox'),
            lastPane = contentBox.one("#" + this._calendarId + "_pane_" + (this._paneNumber - 1));
 
        this._cleanUpNextMonthCells(lastPane);
 
        if (this.get('showNextMonth')) {
            this._turnNextMonthOn(lastPane);
        } else {
            this._turnNextMonthOff(lastPane);
        }
 
    },
 
    /**
     * The handler for the change in the showPrevMonth attribute.
     * @method _afterShowPrevMonthChange
     * @private
     */
    _afterShowPrevMonthChange : function () {
        var contentBox = this.get('contentBox'),
            firstPane = contentBox.one("#" + this._calendarId + "_pane_" + 0);
 
        if (this.get('showPrevMonth')) {
            this._turnPrevMonthOn(firstPane);
        } else {
            this._turnPrevMonthOff(firstPane);
        }
 
    },
 
     /**
     * The handler for the change in the headerRenderer attribute.
     * @method _afterHeaderRendererChange
     * @private
     */
    _afterHeaderRendererChange : function () {
        var headerCell = this.get("contentBox").one("." + CAL_HD_LABEL);
        headerCell.setContent(this._updateCalendarHeader(this.get('date')));
    },
 
     /**
     * The handler for the change in the customRenderer attribute.
     * @method _afterCustomRendererChange
     * @private
     */
    _afterCustomRendererChange : function () {
        this._restoreModifiedCells();
        this._renderCustomRules();
    },
 
     /**
     * The handler for the change in the date attribute. Modifies the calendar
     * view by shifting the calendar grid mask and running custom rendering and
     * selection rendering as necessary.
     * @method _afterDateChange
     * @private
     */
    _afterDateChange : function () {
 
        var contentBox = this.get('contentBox'),
            headerCell = contentBox.one("." + CAL_HD).one("." + CAL_HD_LABEL),
            calendarPanes = contentBox.all("." + CAL_GRID),
            currentDate = this.get("date"),
            counter = 0;
 
        contentBox.setStyle("visibility", "hidden");
        headerCell.setContent(this._updateCalendarHeader(currentDate));
 
        this._restoreModifiedCells();
 
        calendarPanes.each(function (curNode) {
            this._rerenderCalendarPane(ydate.addMonths(currentDate, counter++), curNode);
        }, this);
 
        this._afterShowPrevMonthChange();
        this._afterShowNextMonthChange();
 
        this._renderCustomRules();
        this._renderSelectedDates();
 
        contentBox.setStyle("visibility", "inherit");
    },
 
 
     /**
     * A rendering assist method that initializes the HTML for a single
     * calendar pane.
     * @method _initCalendarPane
     * @param {Date} baseDate The date corresponding to the month of the given
     * calendar pane.
     * @param {String} pane_id The id of the pane, to be used as a prefix for
     * element ids in the given pane.
     * @private
     */
    _initCalendarPane : function (baseDate, pane_id) {
        // Get a list of short weekdays from the internationalization package, or else use default English ones.
        var shortWeekDays = this.get('strings.very_short_weekdays') || ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
            weekDays = Y.Intl.get('datatype-date-format').A,
            // Get the first day of the week from the internationalization package, or else use Sunday as default.
            firstday = this.get('strings.first_weekday') || 0,
            // Compute the cutoff column of the masked calendar table, based on the start date and the first day of week.
            cutoffCol = this._getCutoffColumn(baseDate, firstday),
            // Compute the number of days in the month based on starting date
            daysInMonth = ydate.daysInMonth(baseDate),
            // Initialize the array of individual row HTML strings
            row_array = ['','','','','',''],
            // Initialize the partial templates object
            partials = {},
 
            day,
            row,
            column,
            date,
            id_date,
            calendar_day_class,
            column_visibility,
            output;
 
            // Initialize the partial template for the weekday row cells.
            partials.weekday_row = '';
 
        // Populate the partial template for the weekday row cells with weekday names
        for (day = firstday; day <= firstday + 6; day++) {
            partials.weekday_row +=
                substitute(CalendarBase.WEEKDAY_TEMPLATE, {
                    short_weekdayname: shortWeekDays[day%7],
                    weekdayname: weekDays[day%7]
                });
        }
 
        // Populate the partial template for the weekday row container with the weekday row cells
        partials.weekday_row_template = substitute(CalendarBase.WEEKDAY_ROW_TEMPLATE, partials);
 
        // Populate the array of individual row HTML strings
        for (row = 0; row <= 5; row++) {
 
            for (column = 0; column <= 12; column++) {
 
                // Compute the value of the date that needs to populate the cell
                date = 7*row - 5 + column;
 
                // Compose the value of the unique id of the current calendar cell
                id_date = pane_id + "_" + column + "_" + date;
 
                // Set the calendar day class to one of three possible values
                calendar_day_class = CAL_DAY;
 
                if (date < 1) {
                    calendar_day_class = CAL_PREVMONTH_DAY;
                } else if (date > daysInMonth) {
                    calendar_day_class = CAL_NEXTMONTH_DAY;
                }
 
                // Cut off dates that fall before the first and after the last date of the month
                if (date < 1 || date > daysInMonth) {
                    date = "&nbsp;";
                }
 
                // Decide on whether a column in the masked table is visible or not based on the value of the cutoff column.
                column_visibility = (column >= cutoffCol && column < (cutoffCol + 7)) ? '' : CAL_COL_HIDDEN;
 
                // Substitute the values into the partial calendar day template and add it to the current row HTML string
                row_array[row] += substitute (CalendarBase.CALDAY_TEMPLATE, {
                    day_content: date,
                    calendar_col_class: "calendar_col" + column,
                    calendar_col_visibility_class: column_visibility,
                    calendar_day_class: calendar_day_class,
                    calendar_day_id: id_date
                });
            }
        }
 
        // Instantiate the partial calendar pane body template
        partials.body_template = '';
 
        // Populate the body template with the rows templates
        arrayEach (row_array, function (v) {
             partials.body_template += substitute(CalendarBase.CALDAY_ROW_TEMPLATE, {calday_row: v});
        });
 
        // Populate the calendar grid id
        partials.calendar_pane_id = pane_id;
 
        // Populate the calendar pane tabindex
        partials.calendar_pane_tabindex = this.get("tabIndex");
        partials.pane_arialabel = ydate.format(baseDate, { format: "%B %Y" });
 
 
        // Generate final output by substituting class names.
        output = substitute(substitute (CalendarBase.CALENDAR_GRID_TEMPLATE, partials),
                                                        CalendarBase.CALENDAR_STRINGS);
 
        // Store the initialized pane information
        this._paneProperties[pane_id] = {cutoffCol: cutoffCol, daysInMonth: daysInMonth, paneDate: baseDate};
 
        return output;
    },
 
     /**
     * A rendering assist method that rerenders a specified calendar pane, based
     * on a new Date.
     * @method _rerenderCalendarPane
     * @param {Date} newDate The date corresponding to the month of the given
     * calendar pane.
     * @param {Node} pane The node corresponding to the calendar pane to be rerenders.
     * @private
     */
    _rerenderCalendarPane : function (newDate, pane) {
 
        // Get the first day of the week from the internationalization package, or else use Sunday as default.
        var firstday = this.get('strings.first_weekday') || 0,
            // Compute the cutoff column of the masked calendar table, based on the start date and the first day of week.
            cutoffCol = this._getCutoffColumn(newDate, firstday),
            // Compute the number of days in the month based on starting date
            daysInMonth = ydate.daysInMonth(newDate),
            // Get pane id for easier reference
            paneId = pane.get("id"),
            column,
            currentColumn,
            curCell;
 
        // Hide the pane before making DOM changes to speed them up
        pane.setStyle("visibility", "hidden");
        pane.setAttribute("aria-label", ydate.format(newDate, {format:"%B %Y"}));
 
        // Go through all columns, and flip their visibility setting based on whether they are within the unmasked range.
        for (column = 0; column <= 12; column++) {
            currentColumn = pane.all("." + "calendar_col" + column);
            currentColumn.removeClass(CAL_COL_HIDDEN);
 
            if (column < cutoffCol || column >= (cutoffCol + 7)) {
                currentColumn.addClass(CAL_COL_HIDDEN);
            } else {
                // Clean up dates in visible columns to account for the correct number of days in a month
                switch(column) {
                    case 0:
                        curCell = pane.one("#" + paneId + "_0_30");
                        if (daysInMonth >= 30) {
                            curCell.set("text", "30");
                            curCell.removeClass(CAL_NEXTMONTH_DAY).addClass(CAL_DAY);
                        } else {
                            curCell.setContent("&nbsp;");
                            curCell.removeClass(CAL_DAY).addClass(CAL_NEXTMONTH_DAY);
                        }
                        break;
                    case 1:
                        curCell = pane.one("#" + paneId + "_1_31");
                        if (daysInMonth >= 31) {
                            curCell.set("text", "31");
                            curCell.removeClass(CAL_NEXTMONTH_DAY).addClass(CAL_DAY);
                        } else {
                            curCell.setContent("&nbsp;");
                            curCell.removeClass(CAL_DAY).addClass(CAL_NEXTMONTH_DAY);
                        }
                        break;
                    case 6:
                        curCell = pane.one("#" + paneId + "_6_29");
                        if (daysInMonth >= 29) {
                            curCell.set("text", "29");
                            curCell.removeClass(CAL_NEXTMONTH_DAY).addClass(CAL_DAY);
                        } else {
                            curCell.setContent("&nbsp;");
                            curCell.removeClass(CAL_DAY).addClass(CAL_NEXTMONTH_DAY);
                        }
                        break;
                    case 7:
                        curCell = pane.one("#" + paneId + "_7_30");
                        if (daysInMonth >= 30) {
                            curCell.set("text", "30");
                            curCell.removeClass(CAL_NEXTMONTH_DAY).addClass(CAL_DAY);
                        } else {
                            curCell.setContent("&nbsp;");
                            curCell.removeClass(CAL_DAY).addClass(CAL_NEXTMONTH_DAY);
                        }
                        break;
                    case 8:
                        curCell = pane.one("#" + paneId + "_8_31");
                        if (daysInMonth >= 31) {
                            curCell.set("text", "31");
                            curCell.removeClass(CAL_NEXTMONTH_DAY).addClass(CAL_DAY);
                        } else {
                            curCell.setContent("&nbsp;");
                            curCell.removeClass(CAL_DAY).addClass(CAL_NEXTMONTH_DAY);
                        }
                        break;
                }
            }
        }
 
        // Update stored pane properties
        this._paneProperties[paneId].cutoffCol = cutoffCol;
        this._paneProperties[paneId].daysInMonth = daysInMonth;
        this._paneProperties[paneId].paneDate = newDate;
 
        // Bring the pane visibility back after all DOM changes are done
        pane.setStyle("visibility", "inherit");
 
    },
 
     /**
     * A rendering assist method that updates the calendar header based
     * on a given date and potentially the provided headerRenderer.
     * @method _updateCalendarHeader
     * @param {Date} baseDate The date with which to update the calendar header.
     * @private
     */
    _updateCalendarHeader : function (baseDate) {
        var headerString = "",
            headerRenderer = this.get("headerRenderer");
 
        if (Y.Lang.isString(headerRenderer)) {
            headerString = ydate.format(baseDate, {format:headerRenderer});
        } else if (headerRenderer instanceof Function) {
            headerString = headerRenderer.call(this, baseDate);
        }
 
        return headerString;
    },
 
     /**
     * A rendering assist method that initializes the calendar header HTML
     * based on a given date and potentially the provided headerRenderer.
     * @method _initCalendarHeader
     * @param {Date} baseDate The date with which to initialize the calendar header.
     * @private
     */
    _initCalendarHeader : function (baseDate) {
        return substitute(substitute(CalendarBase.HEADER_TEMPLATE, {
                calheader: this._updateCalendarHeader(baseDate),
                calendar_id: this._calendarId
            }), CalendarBase.CALENDAR_STRINGS );
    },
 
     /**
     * A rendering assist method that initializes the calendar HTML
     * based on a given date.
     * @method _initCalendarHTML
     * @param {Date} baseDate The date with which to initialize the calendar.
     * @private
     */
    _initCalendarHTML : function (baseDate) {
        // Instantiate the partials holder
        var partials = {},
            // Counter for iterative template replacement.
            counter = 0,
            singlePane,
            output;
 
        // Generate the template for the header
        partials.header_template =  this._initCalendarHeader(baseDate);
        partials.calendar_id = this._calendarId;
 
        partials.body_template = substitute(substitute (CalendarBase.CONTENT_TEMPLATE, partials),
                                                                                 CalendarBase.CALENDAR_STRINGS);
 
        // Instantiate the iterative template replacer function
        function paneReplacer () {
            singlePane = this._initCalendarPane(ydate.addMonths(baseDate, counter), partials.calendar_id + "_pane_" + counter);
            counter++;
            return singlePane;
        }
 
        // Go through all occurrences of the calendar_grid_template token and replace it with an appropriate calendar grid.
        output = partials.body_template.replace(/\{calendar_grid_template\}/g, Y.bind(paneReplacer, this));
 
        // Update the paneNumber count
        this._paneNumber = counter;
 
        return output;
    }
}, {
 
     /**
        * The CSS classnames for the calendar templates.
        * @property CALENDAR_STRINGS
        * @type Object
        * @readOnly
        * @protected
        * @static
        */
    CALENDAR_STRINGS: {
        calendar_grid_class       : CAL_GRID,
        calendar_body_class       : CAL_BODY,
        calendar_hd_class         : CAL_HD,
        calendar_hd_label_class   : CAL_HD_LABEL,
        calendar_weekdayrow_class : CAL_WDAYROW,
        calendar_weekday_class    : CAL_WDAY,
        calendar_row_class        : CAL_ROW,
        calendar_day_class        : CAL_DAY,
        calendar_dayanchor_class  : CAL_ANCHOR,
        calendar_pane_class       : CAL_PANE,
        calendar_right_grid_class : CAL_RIGHT_GRID,
        calendar_left_grid_class  : CAL_LEFT_GRID,
        calendar_status_class     : CAL_STATUS
    },
 
    /*
 
    ARIA_STATUS_TEMPLATE: '<div role="status" aria-atomic="true" class="{calendar_status_class}"></div>',
 
    AriaStatus : null,
 
    updateStatus : function (statusString) {
 
        if (!CalendarBase.AriaStatus) {
            CalendarBase.AriaStatus = create(
                                                         substitute (CalendarBase.ARIA_STATUS_TEMPLATE,
                                                                                 CalendarBase.CALENDAR_STRINGS));
            Y.one("body").append(CalendarBase.AriaStatus);
        }
 
            CalendarBase.AriaStatus.set("text", statusString);
    },
 
    */
 
     /**
        * The main content template for calendar.
        * @property CONTENT_TEMPLATE
        * @type String
        * @protected
        * @static
        */
    CONTENT_TEMPLATE:  '<div class="yui3-g {calendar_pane_class}" id="{calendar_id}">' +
                        '{header_template}' +
                        '<div class="yui3-u-1">' +
                        '{calendar_grid_template}' +
                        '</div>' +
                        '</div>',
 
     /**
        * A single pane template for calendar (same as default CONTENT_TEMPLATE)
        * @property ONE_PANE_TEMPLATE
        * @type String
        * @protected
        * @readOnly
        * @static
        */
    ONE_PANE_TEMPLATE: '<div class="yui3-g {calendar_pane_class}" id="{calendar_id}">' +
                            '{header_template}' +
                            '<div class="yui3-u-1">' +
                                '{calendar_grid_template}' +
                            '</div>' +
                        '</div>',
 
     /**
        * A two pane template for calendar.
        * @property TWO_PANE_TEMPLATE
        * @type String
        * @protected
        * @readOnly
        * @static
        */
    TWO_PANE_TEMPLATE: '<div class="yui3-g {calendar_pane_class}" id="{calendar_id}">' +
                            '{header_template}' +
                            '<div class="yui3-u-1-2">'+
                                '<div class = "{calendar_left_grid_class}">' +
                                    '{calendar_grid_template}' +
                                '</div>' +
                            '</div>' +
                            '<div class="yui3-u-1-2">' +
                                '<div class = "{calendar_right_grid_class}">' +
                                    '{calendar_grid_template}' +
                                '</div>' +
                            '</div>' +
                        '</div>',
     /**
        * A three pane template for calendar.
        * @property THREE_PANE_TEMPLATE
        * @type String
        * @protected
        * @readOnly
        * @static
        */
    THREE_PANE_TEMPLATE: '<div class="yui3-g {calendar_pane_class}" id="{calendar_id}">' +
                            '{header_template}' +
                            '<div class="yui3-u-1-3">' +
                                '<div class="{calendar_left_grid_class}">' +
                                    '{calendar_grid_template}' +
                                '</div>' +
                            '</div>' +
                            '<div class="yui3-u-1-3">' +
                                '{calendar_grid_template}' +
                            '</div>' +
                            '<div class="yui3-u-1-3">' +
                                '<div class="{calendar_right_grid_class}">' +
                                    '{calendar_grid_template}' +
                                '</div>' +
                            '</div>' +
                        '</div>',
     /**
        * A template for the calendar grid.
        * @property CALENDAR_GRID_TEMPLATE
        * @type String
        * @protected
        * @static
        */
    CALENDAR_GRID_TEMPLATE: '<table class="{calendar_grid_class}" id="{calendar_pane_id}" role="grid" aria-readonly="true" ' +
                                'aria-label="{pane_arialabel}" tabindex="{calendar_pane_tabindex}">' +
                                '<thead>' +
                                    '{weekday_row_template}' +
                                '</thead>' +
                                '<tbody>' +
                                    '{body_template}' +
                                '</tbody>' +
                            '</table>',
 
     /**
        * A template for the calendar header.
        * @property HEADER_TEMPLATE
        * @type String
        * @protected
        * @static
        */
    HEADER_TEMPLATE: '<div class="yui3-g {calendar_hd_class}">' +
                        '<div class="yui3-u {calendar_hd_label_class}" id="{calendar_id}_header" aria-role="heading">' +
                            '{calheader}' +
                        '</div>' +
                    '</div>',
 
     /**
        * A template for the row of weekday names.
        * @property WEEKDAY_ROW_TEMPLATE
        * @type String
        * @protected
        * @static
        */
    WEEKDAY_ROW_TEMPLATE: '<tr class="{calendar_weekdayrow_class}" role="row">' +
                            '{weekday_row}' +
                        '</tr>',
 
     /**
        * A template for a single row of calendar days.
        * @property CALDAY_ROW_TEMPLATE
        * @type String
        * @protected
        * @static
        */
    CALDAY_ROW_TEMPLATE: '<tr class="{calendar_row_class}" role="row">' +
                            '{calday_row}' +
                        '</tr>',
 
     /**
        * A template for a single cell with a weekday name.
        * @property WEEKDAY_TEMPLATE
        * @type String
        * @protected
        * @static
        */
    WEEKDAY_TEMPLATE: '<th class="{calendar_weekday_class}" role="columnheader" aria-label="{weekdayname}">{short_weekdayname}</th>',
 
     /**
        * A template for a single cell with a calendar day.
        * @property CALDAY_TEMPLATE
        * @type String
        * @protected
        * @static
        */
    CALDAY_TEMPLATE: '<td class="{calendar_col_class} {calendar_day_class} {calendar_col_visibility_class}" id="{calendar_day_id}" ' +
                        'role="gridcell" tabindex="-1">' +
                        '{day_content}' +
                    '</td>',
 
     /**
        * The identity of the widget.
        *
        * @property NAME
        * @type String
        * @default 'calendarBase'
        * @readOnly
        * @protected
        * @static
        */
    NAME: 'calendarBase',
 
     /**
        * Static property used to define the default attribute configuration of
        * the Widget.
        *
        * @property ATTRS
        * @type {Object}
        * @protected
        * @static
        */
    ATTRS: {
        tabIndex: {
            value: 1
        },
        /**
         * The date corresponding to the current calendar view. Always
         * normalized to the first of the month that contains the date
         * at assignment time. Used as the first date visible in the
         * calendar.
         *
         * @attribute date
         * @type Date
         * @default The first of the month containing today's date, as
         * set on the end user's system.
         */
        date: {
            value: new Date(),
            setter: function (val) {
                var newDate = this._normalizeDate(val);
                if (ydate.areEqual(newDate, this.get('date'))) {
                        return this.get('date');
                } else {
                        return newDate;
                }
            }
        },
 
        /**
         * A setting specifying whether to shows days from the previous
         * month in the visible month's grid, if there are empty preceding
         * cells available.
         *
         * @attribute showPrevMonth
         * @type boolean
         * @default false
         */
        showPrevMonth: {
            value: false
        },
 
        /**
         * A setting specifying whether to shows days from the next
         * month in the visible month's grid, if there are empty
         * cells available at the end.
         *
         * @attribute showNextMonth
         * @type boolean
         * @default false
         */
        showNextMonth: {
            value: false
        },
 
        /**
         * Strings and properties derived from the internationalization packages
         * for the calendar.
         *
         * @attribute strings
         * @type Object
         * @protected
         */
        strings : {
            valueFn: function() { return Y.Intl.get("calendar-base"); }
        },
 
        /**
         * Custom header renderer for the calendar.
         *
         * @attribute headerRenderer
         * @type String | Function
         */
        headerRenderer: {
            value: "%B %Y"
        },
 
        /**
         * The name of the rule which all enabled dates should match.
         * Either disabledDatesRule or enabledDatesRule should be specified,
         * or neither, but not both.
         *
         * @attribute enabledDatesRule
         * @type String
         * @default null
         */
        enabledDatesRule: {
            value: null
        },
 
        /**
         * The name of the rule which all disabled dates should match.
         * Either disabledDatesRule or enabledDatesRule should be specified,
         * or neither, but not both.
         *
         * @attribute disabledDatesRule
         * @type String
         * @default null
         */
        disabledDatesRule: {
            value: null
        },
 
        /**
         * A read-only attribute providing a list of currently selected dates.
         *
         * @attribute selectedDates
         * @readOnly
         * @type Array
         */
        selectedDates : {
            readOnly: true,
            getter: function () {
                return (this._getSelectedDatesList());
            }
        },
 
        /**
         * An object of the form {rules:Object, filterFunction:Function},
         * providing  set of rules and a custom rendering function for
         * customizing specific calendar cells.
         *
         * @attribute customRenderer
         * @type Object
         * @default {}
         */
        customRenderer : {
            lazyAdd: false,
            value: {},
            setter: function (val) {
                this._rules = val.rules;
                this._filterFunction = val.filterFunction;
            }
        }
    }
 
});