calendar-base.js revision 528126a57f0c28ce4de35bb3c4c4cbfbb52a36e7
0N/A * The CalendarBase submodule is a basic UI calendar view that displays 0N/A * a range of dates in a two-dimensional month grid, with one or more 0N/A * months visible at a single time. CalendarBase supports custom date 0N/A * rendering, multiple calendar panes, and selection. 0N/A * @submodule calendar-base 0N/A/** Create a calendar view to represent a single or multiple 1008N/A * month range of dates, rendered as a grid with date and 0N/A * @param config {Object} Configuration object (see Configuration 1008N/A * A storage for various properties of individual month 1008N/A * @property _paneProperties 1008N/A * The number of month panes in the calendar, deduced 1008N/A * from the CONTENT_TEMPLATE's number of {calendar_grid} 1787N/A * The unique id used to prefix various elements of this 1787N/A * The hash map of selected dates, populated with 1787N/A * selectDates() and deselectDates() methods 1787N/A * A private copy of the rules object, populated 1787N/A * by setting the customRenderer attribute. 0N/A * A private copy of the filterFunction, populated 0N/A * by setting the customRenderer attribute. 0N/A * @property _filterFunction 0N/A * Storage for calendar cells modified by any custom 0N/A * formatting. The storage is cleared, used to restore 0N/A * cells to the original state, and repopulated accordingly 0N/A * when the calendar is rerendered. * @property _storedDateCells * Initializes instance-level properties of * renderUI implementation * Creates a visual representation of the calendar based on existing parameters. if (
this.
get(
'showPrevMonth')) {
if (
this.
get(
'showNextMonth')) {
* Assigns listeners to relevant events that change the state * Update the scroll position, based on the current value of scrollY if (
this.
get(
'showPrevMonth')) {
if (
this.
get(
'showNextMonth')) {
* An internal utility method that generates a list of selected dates * @method _getSelectedDatesList * @return {Array} The array of `Date`s that are currently selected. * 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 * @return {Array} The array of `Date`s in a given month that are currently selected. * 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. * 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. * An internal utility method that checks whether a particular date * is in the current view of the calendar. * @param {Date} oDate The date corresponding to a specific date cell. * @return {boolean} Returns true if the given date is in the current * 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. * @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. * @return {boolean} Returns true if the given number is in the given list. * 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 * @return {Array} Returns an array of `String`s, each containg the name of * a rule that the given date matches. * A utility method which, given a specific date and a name of the rule, * checks whether the date matches the given rule. * @param {Date} oDate The date to check * @param {String} rule The name of the rule that the date should match. * @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. * @param {Date} oDate The date to check * @return {boolean} Returns true if the date can be selected; false otherwise. * Selects a given date or array of dates. * @param {Date|Array} dates A `Date` or `Array` of `Date`s. * Deselects a given date or array of dates, or deselects * all dates if no argument is specified. * @param {Date|Array} [dates] A `Date` or `Array` of `Date`s, or no * argument if all dates should be deselected. * 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 * 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. * 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. * 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 * 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. * 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. * A utility method that removes all dates from selection. * @method _clearSelection * @param {boolean} noevent A Boolean specifying whether a selectionChange * A utility method that fires a selectionChange event. * @method _fireSelectionChange * Fired when the set of selected dates changes. Contains a payload with * a `newSelection` property with an array of selected dates. * A utility method that restores cells modified by custom formatting. * @method _restoreModifiedCells * A rendering assist method that renders all cells modified by the customRenderer * rules, as well as the enabledDatesRule and disabledDatesRule. * @method _renderCustomRules * A rendering assist method that renders all cells that are currently selected. * @method _renderSelectedDates * A utility method that converts a date to the node wrapping the calendar cell * the date corresponds to.. * @param {Date} oDate The date to convert to Node * @return {Node} The node wrapping the DOM element of the cell the date * A utility method that converts a node corresponding to the DOM element of * the cell for a particular date to that date. * @param {Node} oNode The Node wrapping the DOM element of a particular date cell. * @return {Date} The date corresponding to the DOM element that the given node wraps. * A placeholder method, called from bindUI, to bind the Calendar events. * @method _bindCalendarEvents * 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. * @param {Date} oDate The date to normalize * @return {Date} The normalized date, set to the first of the month, with time * A render assist utility method that computes the cutoff column for the calendar * @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) * @return {Number} The number of the cutoff column. * 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 * 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 * 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. * 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 * 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 * The handler for the change in the showNextMonth attribute. * @method _afterShowNextMonthChange if (
this.
get(
'showNextMonth')) {
* The handler for the change in the showPrevMonth attribute. * @method _afterShowPrevMonthChange if (
this.
get(
'showPrevMonth')) {
* The handler for the change in the headerRenderer attribute. * @method _afterHeaderRendererChange * The handler for the change in the customRenderer attribute. * @method _afterCustomRendererChange * 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 * A rendering assist method that initializes the HTML for a single * @method _initCalendarPane * @param {Date} baseDate The date corresponding to the month of the given * @param {String} pane_id The id of the pane, to be used as a prefix for * element ids in the given pane. // Initialize final output HTML string // Get a list of short weekdays from the internationalization package, or else use default English ones. weekdays =
this.
get(
'strings.very_short_weekdays') || [
"Su",
"Mo",
"Tu",
"We",
"Th",
"Fr",
"Sa"],
fullweekdays =
this.
get(
'strings.weekdays') || [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"],
// 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 // Initialize the partial template for the weekday row cells. // Populate the partial template for the weekday row cells with weekday names // 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 // Cut off dates that fall before the first and after the last date of the month // 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 // Instantiate the partial calendar pane body template // Populate the body template with the rows templates // Populate the calendar grid id // Populate the calendar pane tabindex partials[
"calendar_pane_tabindex"] =
this.
get(
"tabIndex");
// Generate final output by substituting class names. // Store the initialized pane information * A rendering assist method that rerenders a specified calendar pane, based * @method _rerenderCalendarPane * @param {Date} newDate The date corresponding to the month of the given * @param {Node} pane The node corresponding to the calendar pane to be rerenders. // 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. // Clean up dates in visible columns to account for the correct number of days in a month // 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. * 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. * A rendering assist method that initializes the calendar HTML * @method _initCalendarHTML * @param {Date} baseDate The date with which to initialize the calendar. // Instantiate the partials holder // Counter for iterative template replacement. // Generate the template for the header // Instantiate the iterative template replacer function // Go through all occurrences of the calendar_grid_template token and replace it with an appropriate calendar grid. // Update the paneNumber count * The CSS classnames for the calendar templates. * @property CALENDAR_STRINGS ARIA_STATUS_TEMPLATE:
'<div role="status" aria-atomic="true" class="{calendar_status_class}"></div>',
* The main content template for calendar. * @property CONTENT_TEMPLATE CONTENT_TEMPLATE:
'<div class="yui3-g {calendar_pane_class}" id="{calendar_id}">' +
'<div class="yui3-u-1">' +
'{calendar_grid_template}' +
* A single pane template for calendar (same as default CONTENT_TEMPLATE) * @property ONE_PANE_TEMPLATE '<div class="yui3-u-1">' +
'{calendar_grid_template}' +
* A two pane template for calendar. * @property TWO_PANE_TEMPLATE '<div class="yui3-u-1-2">'+
'<div class = "{calendar_left_grid_class}">' +
'{calendar_grid_template}' +
'<div class="yui3-u-1-2">' +
'<div class = "{calendar_right_grid_class}">' +
'{calendar_grid_template}' +
* A three pane template for calendar. * @property THREE_PANE_TEMPLATE '<div class="yui3-u-1-3">' +
'<div class = "{calendar_left_grid_class}">' +
'{calendar_grid_template}' +
'<div class="yui3-u-1-3">' +
'{calendar_grid_template}' +
'<div class="yui3-u-1-3">' +
'<div class = "{calendar_right_grid_class}">' +
'{calendar_grid_template}' +
* A template for the calendar grid. * @property CALENDAR_GRID_TEMPLATE 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}">' +
'{weekday_row_template}' +
* A template for the calendar header. * @property HEADER_TEMPLATE '<div class="yui3-u {calendar_hd_label_class}" id="{calendar_id}_header" aria-role="heading">' +
* A template for the row of weekday names. * @property WEEKDAY_ROW_TEMPLATE * A template for a single row of calendar days. * @property CALDAY_ROW_TEMPLATE * A template for a single cell with a weekday name. * @property CALDAY_ROW_TEMPLATE WEEKDAY_TEMPLATE:
'<th class="{calendar_weekday_class}" role="columnheader" aria-label="{full_weekdayname}">{weekdayname}</th>',
* A template for a single cell with a calendar day. * @property CALDAY_TEMPLATE CALDAY_TEMPLATE:
'<td class="{calendar_col_class} {calendar_day_class} {calendar_col_visibility_class}" id="{calendar_day_id}" role="gridcell">' +
* The identity of the widget. * @default 'calendarBase' * Static property used to define the default attribute configuration of * 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 * @default The first of the month containing today's date, as * set on the end user's system. * A setting specifying whether to shows days from the previous * month in the visible month's grid, if there are empty preceding * @attribute showPrevMonth * 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 * Strings and properties derived from the internationalization packages * Custom header renderer for the calendar. * @attribute headerRenderer * @type String | Function * 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 * 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 * A read-only attribute providing a list of currently selected dates. * @attribute selectedDates * 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 },
'@VERSION@' ,{
lang:[
'de',
'en',
'fr',
'ja',
'pt-BR',
'ru',
'zh-HANT-TW'],
requires:[
'widget',
'substitute',
'datatype-date',
'datatype-date-math',
'cssgrids']});