calendar-base.js revision 6e847ed42c6e59e53bca347d80876b6ecb5a60f7
/**
* 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
*/
CALENDAR = 'calendar',
L = Y.Lang,
substitute = Y.substitute,
/** 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(config) {
}
/**
* 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
*/
/**
* 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
*
* @method initializer
*/
initializer : function () {
},
/**
* renderUI implementation
*
* Creates a visual representation of the calendar based on existing parameters.
* @method renderUI
*/
renderUI : function () {
if (this.get('showPrevMonth')) {
this._afterShowPrevMonthChange();
}
if (this.get('showNextMonth')) {
this._afterShowNextMonthChange();
}
this._renderCustomRules();
this._renderSelectedDates();
},
/**
* bindUI implementation
*
* Assigns listeners to relevant events that change the state
* of the calendar.
* @method bindUI
*/
bindUI : function () {
this._bindCalendarEvents();
},
/**
* syncUI implementation
*
* Update the scroll position, based on the current value of scrollY
* @method syncUI
*/
syncUI : function () {
if (this.get('showPrevMonth')) {
this._afterShowPrevMonthChange();
}
if (this.get('showNextMonth')) {
this._afterShowNextMonthChange();
}
},
/**
* 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 = [];
}, 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) {
}
else {
return [];
}
},
/**
* An internal rendering method that modifies a date cell to have the
* selected CSS class if the date cell is visible.
*
* @method _renderSelectedDate
* @param {Date} oDate The date corresponding to a specific date cell.
* @private
*/
_renderSelectedDate : function (oDate) {
if (this._isDateVisible(oDate)) {
}
},
/**
* An internal rendering method that modifies a date cell to remove the
* selected CSS class if the date cell is visible.
*
* @method _renderUnelectedDate
* @param {Date} oDate The date corresponding to a specific date cell.
* @private
*/
_renderUnselectedDate : function (oDate) {
if (this._isDateVisible(oDate)) {
}
},
/**
* An internal utility method that checks whether a particular date
* is in the current view of the calendar.
*
* @method _isDateVisible
* @param {Date} oDate The date corresponding to a specific date cell.
* @private
* @return {boolean} Returns true if the given date is in the current
* view of the calendar.
*/
_isDateVisible : function (oDate) {
return true;
}
else {
return false;
}
},
/**
* 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.
*/
if (strList == "all") {
return true;
}
else {
return true;
}
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) {
outputRules = [];
}
else {
}
else {
}
else {
}
}
}
}
}
}
}
}
}
}
}
}
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.
*
*/
},
/**
* 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) {
if (enabledDatesRule) {
}
else if (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.
*/
selectDates : function (dates) {
this._addDateToSelection(dates);
}
this._addDatesToSelection(dates);
}
},
/**
* 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.
*/
deselectDates : function (dates) {
if (dates == null) {
this._clearSelection();
}
this._removeDateFromSelection(dates);
}
this._removeDatesFromSelection(dates);
}
},
/**
* 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
*/
if (this._canBeSelected(oDate)) {
}
else {
}
}
else {
this._selectedDates[year] = {};
}
this._renderSelectedDate(oDate);
if (index == null) {
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) {
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
*/
}
}
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
*/
this._renderUnselectedDate(oDate);
if (index == null) {
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) {
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
*/
}
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.
* @private
*/
_clearSelection : function (noevent) {
this._selectedDates = {};
if (!noevent) {
this._fireSelectionChange();
}
},
/**
* A utility method that fires a selectionChange event.
* @method _fireSelectionChange
* @private
*/
_fireSelectionChange : function () {
},
/**
* A utility method that restores cells modified by custom formatting.
* @method _restoreModifiedCells
* @private
*/
_restoreModifiedCells : function () {
for (id in this._storedDateCells) {
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);
}
if (L.isFunction(this._filterFunction)) {
}
}
},
this);
}
}
},
/**
* A rendering assist method that renders all cells that are currently selected.
* @method _renderSelectedDates
* @private
*/
_renderSelectedDates : function () {
},
this);
}
},
/**
* 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) {
col = 0,
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) {
},
/**
* 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) {
},
/**
* 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.
*/
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) {
}
{
}
}
},
/**
* 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) {
{
}
},
/**
* 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) {
},
/**
* 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.one("#" + pane_id + "_" + cell + "_" + (cell+23)).setContent(dayCounter++).addClass(CAL_NEXTMONTH_DAY);
}
var startingCell = cutoffCol;
startingCell = 2;
}
startingCell = 1;
}
pane.one("#" + pane_id + "_" + cell + "_" + (cell+30)).setContent(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) {
{
pane.one("#" + pane_id + "_" + cell + "_" + (cell+23)).setContent(" ").addClass(CAL_NEXTMONTH_DAY);
}
var startingCell = 0;
startingCell = 2;
}
startingCell = 1;
}
pane.one("#" + pane_id + "_" + cell + "_" + (cell+30)).setContent(" ").addClass(CAL_NEXTMONTH_DAY);
}
},
/**
* The handler for the change in the showNextMonth attribute.
* @method _afterShowNextMonthChange
* @private
*/
_afterShowNextMonthChange : function () {
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 () {
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 () {
},
/**
* The handler for the change in the customRenderer attribute.
* @method _afterCustomRendererChange
* @private
*/
_afterCustomRendererChange : function () {
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 () {
counter = 0;
this._restoreModifiedCells();
curNode);
}, this);
this._afterShowPrevMonthChange();
this._afterShowNextMonthChange();
this._renderCustomRules();
this._renderSelectedDates();
},
/**
* 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
*/
// Initialize final output HTML string
var calString = '',
// Get a list of short weekdays from the internationalization package, or else use default English ones.
// Get the first day of the week from the internationalization package, or else use Sunday as default.
// Compute the cutoff column of the masked calendar table, based on the start date and the first day of week.
// Compute the number of days in the month based on starting date
// Initialize the array of individual row HTML strings
// Initialize the partial templates object
partials = {};
// Initialize the partial template for the weekday row cells.
// Populate the partial template for the weekday row cells with weekday names
partials["weekday_row"] +=
}
// Populate the partial template for the weekday row container with the weekday row cells
// Populate the array of individual row HTML strings
// Compute the value of the date that needs to populate the cell
// Compose the value of the unique id of the current calendar cell
// Set the calendar day class to one of three possible values
var calendar_day_class = CAL_DAY;
if (date < 1) {
}
else if (date > daysInMonth) {
}
// Cut off dates that fall before the first and after the last date of the month
date = " ";
}
// Decide on whether a column in the masked table is visible or not based on the value of the cutoff column.
// Substitute the values into the partial calendar day template and add it to the current row HTML string
{day_content: date,
}
}
// Instantiate the partial calendar pane body template
// Populate the body template with the rows templates
{calday_row: v});
});
// Populate the calendar grid id
// Generate final output by substituting class names.
// 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
*/
// Get the first day of the week from the internationalization package, or else use Sunday as default.
// Compute the cutoff column of the masked calendar table, based on the start date and the first day of week.
// Compute the number of days in the month based on starting date
// Get pane id for easier reference
// Hide the pane before making DOM changes to speed them up
// Go through all columns, and flip their visibility setting based on whether they are within the unmasked range.
}
else {
// Clean up dates in visible columns to account for the correct number of days in a month
switch(column)
{
case 0:
if (daysInMonth >= 30) {
}
else {
}
break;
case 1:
if (daysInMonth >= 31) {
}
else {
}
break;
case 6:
if (daysInMonth >= 29) {
}
else {
}
break;
case 7:
if (daysInMonth >= 30) {
}
else {
}
break;
case 8:
if (daysInMonth >= 31) {
}
else {
}
break;
}
}
}
// Update stored pane properties
// Bring the pane visibility back after all DOM changes are done
},
/**
* 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 = "",
}
else if (headerRenderer instanceof Function) {
}
return headerString;
},
/**
* A rendering assist method that initializes the calendar header HTML
* based on a given date and potentially the provided headerRenderer.
* @method _updateCalendarHeader
* @param {Date} baseDate The date with which to initialize the calendar header.
* @private
*/
_initCalendarHeader : function (baseDate) {
},
/**
* 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;
// Generate the template for the header
// Instantiate the iterative template replacer function
function paneReplacer () {
var 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.
var 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 CalendarBase.CALENDAR_STRINGS
* @type Object
* @readOnly
* @protected
* @static
*/
},
/**
* The main content template for calendar.
* @property CalendarBase.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 CalendarBase.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 yui3-calendar-main-grid">' +
'{calendar_grid_template}' +
'</div>' +
'</div>',
/**
* A two pane template for calendar.
* @property CalendarBase.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 CalendarBase.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 CalendarBase.CALENDAR_GRID_TEMPLATE
* @type String
* @protected
* @static
*/
CALENDAR_GRID_TEMPLATE: '<table class="{calendar_grid_class}" id="{calendar_pane_id}">' +
'<thead>' +
'{weekday_row_template}' +
'</thead>' +
'<tbody>' +
'{body_template}' +
'</tbody>' +
'</table>',
/**
* A template for the calendar header.
* @property CalendarBase.HEADER_TEMPLATE
* @type String
* @protected
* @static
*/
HEADER_TEMPLATE: '<div class="yui3-g {calendar_hd_class}">' +
'<div class="yui3-u {calendar_hd_label_class}">' +
'<h4>' +
'{calheader}' +
'</h4>' +
'</div>' +
'</div>',
/**
* A template for the row of weekday names.
* @property CalendarBase.WEEKDAY_ROW_TEMPLATE
* @type String
* @protected
* @static
*/
WEEKDAY_ROW_TEMPLATE: '<tr class="{calendar_weekdayrow_class}">' +
'{weekday_row}' +
'</tr>',
/**
* A template for a single row of calendar days.
* @property CalendarBase.CALDAY_ROW_TEMPLATE
* @type String
* @protected
* @static
*/
CALDAY_ROW_TEMPLATE: '<tr class="{calendar_row_class}">' +
'{calday_row}' +
'</tr>',
/**
* A template for a single cell with a weekday name.
* @property CalendarBase.CALDAY_ROW_TEMPLATE
* @type String
* @protected
* @static
*/
WEEKDAY_TEMPLATE: '<th class="{calendar_weekday_class}">{weekdayname}</th>',
/**
* A template for a single cell with a calendar day.
* @property CalendarBase.CALDAY_TEMPLATE
* @type String
* @protected
* @static
*/
CALDAY_TEMPLATE: '<td class="{calendar_col_class} {calendar_day_class} {calendar_col_visibility_class}" id="{calendar_day_id}">' +
'{day_content}' +
'</td>',
/**
* The identity of the widget.
*
* @property CalendarBase.NAME
* @type String
* @default 'calendarBase'
* @readOnly
* @protected
* @static
*/
NAME: 'calendarBase',
/**
* Static property used to define the default attribute configuration of
* the Widget.
*
* @property CalendarBase.ATTRS
* @type {Object}
* @protected
* @static
*/
ATTRS: {
/**
* 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 Today's date as set on the user's computer.
*/
date: {
value: new Date(),
return this.get('date');
}
}
},
/**
* 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
*/
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
*/
value: false
},
/**
* Strings and properties derived from the internationalization packages
* for the calendar.
*
* @attribute strings
* @type Object
* @protected
*/
strings : {
},
/**
* Custom header renderer for the calendar.
*
* @attribute headerRenderer
* @type String | Function
*/
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
*/
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
*/
value: null
},
/**
* A read-only attribute providing a list of currently selected dates.
*
* @attribute selectedDates
* @readOnly
* @type Array
*/
selectedDates : {
readOnly: true,
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
* @readOnly
* @type Object
* @default {}
*/
customRenderer : {
value: {},
}
}
}
});