# Yahoo! UI Library

### Calendar 2.8.1

Yahoo! UI Library > calendar > YAHOO.widget.CalendarGroup
Search:
Filters Show Private Show Protected Show Deprecated

## Class YAHOO.widget.CalendarGroup

Known Subclasses:
  YAHOO.widget.Calendar2up

YAHOO.widget.CalendarGroup is a special container class for YAHOO.widget.Calendar. This class facilitates the ability to have multi-page calendar views that share a single dataset and are dependent on each other. The calendar group instance will refer to each of its elements using a 0-based index. For example, to construct the placeholder for a calendar group widget with id "cal1" and containerId of "cal1Container", the markup would be as follows:

    <div id="cal1Container_0"></div>
    <div id="cal1Container_1"></div>

The tables for the calendars ("cal1_0" and "cal1_1") will be inserted into those containers.

NOTE: As of 2.4.0, the constructor's ID argument is optional. The CalendarGroup can be constructed by simply providing a container ID string, or a reference to a container DIV HTMLElement (the element needs to exist in the document). E.g.:

    var c = new YAHOO.widget.CalendarGroup("calContainer", configOptions);

or:

    var containerDiv = YAHOO.util.Dom.get("calContainer");
    var c = new YAHOO.widget.CalendarGroup(containerDiv, configOptions);

If not provided, the ID will be generated from the container DIV ID by adding an "_t" suffix. For example if an ID is not provided, and the container's ID is "calContainer", the CalendarGroup's ID will be set to "calContainer_t".

### Constructor

YAHOO.widget.CalendarGroup `( id , container , config )`

Parameters:
  `id <String>` optional The id of the table element that will represent the CalendarGroup widget. As of 2.4.0, this argument is optional.
  `container <String | HTMLElement>` The id of the container div element that will wrap the CalendarGroup table, or a reference to a DIV element which exists in the document.
  `config <Object>` optional The configuration object containing the initial configuration values for the CalendarGroup.

### Properties

#### cfg - `YAHOO.util.Config`

The Config object used to hold the configuration variables for the CalendarGroup

#### containerId - `String`

The unique id associated with the CalendarGroup container

#### id - `String`

The unique id associated with the CalendarGroup

#### Locale - `Object`

The local object which contains the CalendarGroup's locale settings

#### Options - `Object`

The local object which contains the CalendarGroup's options

#### pages - `YAHOO.widget.Calendar[]`

The collection of Calendar pages contained within the CalendarGroup

#### YAHOO.widget.CalendarGroup._DEFAULT_CONFIG - `private static Object`

The set of default Config property keys and values for the CalendarGroup
Deprecated: Made public. See the public DEFAULT_CONFIG property for details

#### YAHOO.widget.CalendarGroup.CSS_2UPCLOSE - `static final String`

CSS class representing the close icon for the 2-up calendar
Deprecated: Along with Calendar.IMG_ROOT and NAV_ARROW_LEFT, NAV_ARROW_RIGHT configuration properties. Calendar's Style.CSS_CLOSE property now represents the CSS class used to render the close icon

#### YAHOO.widget.CalendarGroup.CSS_2UPTITLE - `static final String`

CSS class representing the title for the 2-up calendar

#### YAHOO.widget.CalendarGroup.CSS_CONTAINER - `static final String`

CSS class representing the container for the calendar

#### YAHOO.widget.CalendarGroup.CSS_MULTI_UP - `static final String`

CSS class representing the container for the calendar

#### YAHOO.widget.CalendarGroup.DEFAULT_CONFIG - `static Object An object with key/value pairs, the key being the uppercase configuration property name and the value being an objec literal with a key string property, and a value property, specifying the default value of the property`

The set of default Config property keys and values for the CalendarGroup.

NOTE: This property is made public in order to allow users to change the default values of configuration properties. Users should not modify the key string, unless they are overriding the Calendar implementation

### Methods

#### _fixWidth

`private void _fixWidth ( )`
Fixes the width of the CalendarGroup container element, to account for miswrapped floats

#### _setMonthOnDate

`private void _setMonthOnDate ( date , iMonth )`
Sets the month on a Date object, taking into account year rollover if the month is less than 0 or greater than 11. The Date object passed in is modified. It should be cloned before passing it into this method if the original value needs to be maintained

Parameters:
  `date <Date>` The Date object on which to set the month index
  `iMonth <Number>` The month index to set

#### addMonthRenderer

`void addMonthRenderer ( month , fnRender )`
Adds a month to the render stack. The function reference passed to this method will be executed when a date cell matches the month passed to this method.

Parameters:
  `month <Number>` The month (1-12) to associate with this renderer
  `fnRender <Function>` The function executed to render cells that match the render rules for this renderer.

#### addMonths

`void addMonths ( count )`
Adds the designated number of months to the current calendar month, and sets the current calendar page date to the new month.

Parameters:
  `count <Number>` The number of months to add to the current calendar

#### addRenderer

`void addRenderer ( sDates , fnRender )`
Adds a renderer to the render stack. The function reference passed to this method will be executed when a date cell matches the conditions specified in the date string for this renderer.

Parameters:
  `sDates <String>` A date string to associate with the specified renderer. Valid formats include date (12/24/2005), month/day (12/24), and range (12/1/2004-1/1/2005)
  `fnRender <Function>` The function executed to render cells that match the render rules for this renderer.

#### addWeekdayRenderer

`void addWeekdayRenderer ( weekday , fnRender )`
Adds a weekday to the render stack. The function reference passed to this method will be executed when a date cell matches the weekday passed to this method.

Parameters:
  `weekday <Number>` The weekday (1-7) to associate with this renderer. 1=Sunday, 2=Monday etc.
  `fnRender <Function>` The function executed to render cells that match the render rules for this renderer.

#### addYears

`void addYears ( count )`
Adds the designated number of years to the current calendar, and sets the current calendar page date to the new month.

Parameters:
  `count <Number>` The number of years to add to the current calendar

#### callChildFunction

`void callChildFunction ( fnName , args )`
Calls a function within all child Calendars within this CalendarGroup.

Parameters:
  `fnName <String>` The name of the function
  `args <Array>` The arguments to pass to the function

#### clear

`void clear ( )`
Clears the selected dates in the current calendar widget and sets the calendar to the current month and year.

#### configPageDate

`void configPageDate ( type , args , obj )`
The default Config handler for the "pagedate" property

Parameters:
  `type <String>` The CustomEvent type (usually the property name)
  `args <Object[]>` The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  `obj <Object>` The scope object. For configuration handlers, this will usually equal the owner.

#### configPages

`void configPages ( type , args , obj )`
The default Config handler for the "pages" property

Parameters:
  `type <String>` The CustomEvent type (usually the property name)
  `args <Object[]>` The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  `obj <Object>` The scope object. For configuration handlers, this will usually equal the owner.

#### configSelected

`void configSelected ( type , args , obj )`
The default Config handler for the CalendarGroup "selected" property

Parameters:
  `type <String>` The CustomEvent type (usually the property name)
  `args <Object[]>` The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  `obj <Object>` The scope object. For configuration handlers, this will usually equal the owner.

#### constructChild

`YAHOO.widget.Calendar constructChild ( id , containerId , config )`
Constructs a child calendar. This method can be overridden if a subclassed version of the default calendar is to be used.

Parameters:
  `id <String>` The id of the table element that will represent the calendar widget
  `containerId <String>` The id of the container div element that will wrap the calendar table
  `config <Object>` The configuration object containing the Calendar's arguments

Returns: `YAHOO.widget.Calendar`
  The YAHOO.widget.Calendar instance that is constructed

#### delegateConfig

`void delegateConfig ( type , args , obj )`
Delegates a configuration property to the CustomEvents associated with the CalendarGroup's children

Parameters:
  `type <String>` The CustomEvent type (usually the property name)
  `args <Object[]>` The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  `obj <Object>` The scope object. For configuration handlers, this will usually equal the owner.

#### deselect

`Date[] deselect ( date )`
Deselects a date or a collection of dates on the current calendar. This method, by default, does not call the render method explicitly. Once deselection has completed, render must be called for the changes to be reflected visually.

Parameters:
  `date <String/Date/Date[]>` The date string of dates to deselect in the current calendar. Valid formats are individual date(s) (12/24/2005,12/26/2005) or date range(s) (12/24/2005-1/1/2006). Multiple comma-delimited dates can also be passed to this method (12/24/2005,12/11/2005-12/13/2005). This method can also take a JavaScript Date object or an array of Date objects.

Returns: `Date[]`
  Array of JavaScript Date objects representing all individual dates that are currently selected.

#### deselectAll

`Date[] deselectAll ( )`
Deselects all dates on the current calendar.

Returns: `Date[]`
  Array of JavaScript Date objects representing all individual dates that are currently selected. Assuming that this function executes properly, the return value should be an empty array. However, the empty array is returned for the sake of being able to check the selection status of the calendar.

#### deselectCell

`Date[] deselectCell ( cellIndex )`
Deselects dates in the CalendarGroup based on the cell index provided. This method is used to select cells without having to do a full render. The selected style is applied to the cells directly. deselectCell will deselect the cell at the specified index on each displayed Calendar page.

Parameters:
  `cellIndex <Number>` The index of the cell to deselect.

Returns: `Date[]`
  Array of JavaScript Date objects representing all individual dates that are currently selected.

#### destroy

`void destroy ( )`
Destroys the CalendarGroup instance. The method will remove references to HTML elements, remove any event listeners added by the CalendarGroup. It will also destroy the Config and CalendarNavigator instances created by the CalendarGroup and the individual Calendar instances created for each page.

#### getCalendarPage

`Calendar getCalendarPage ( date )`
Returns the Calendar page instance which has a pagedate (month/year) matching the given date. Returns null if no match is found.

Parameters:
  `date <Date>` The JavaScript Date object for which a Calendar page is to be found.

Returns: `Calendar`
  The Calendar page instance representing the month to which the date belongs.

#### getSelectedDates

`getSelectedDates ( )`
Gets the list of currently selected dates from the calendar.

Returns: ``
  An array of currently selected JavaScript Date objects.

#### init

`void init ( id , container , config )`
Initializes the calendar group. All subclasses must call this method in order for the group to be initialized properly.

Parameters:
  `id <String>` optional The id of the table element that will represent the CalendarGroup widget. As of 2.4.0, this argument is optional.
  `container <String | HTMLElement>` The id of the container div element that will wrap the CalendarGroup table, or a reference to a DIV element which exists in the document.
  `config <Object>` optional The configuration object containing the initial configuration values for the CalendarGroup.

#### initEvents

`void initEvents ( )`
Initializes CalendarGroup's built-in CustomEvents

#### nextMonth

`void nextMonth ( )`
Navigates to the next month page in the calendar widget.

#### nextYear

`void nextYear ( )`
Navigates to the next year in the currently selected month in the calendar widget.

#### previousMonth

`void previousMonth ( )`
Navigates to the previous month page in the calendar widget.

#### previousYear

`void previousYear ( )`
Navigates to the previous year in the currently selected month in the calendar widget.

#### removeRenderers

`void removeRenderers ( )`
Removes all custom renderers added to the CalendarGroup through the addRenderer, addMonthRenderer and addWeekRenderer methods. CalendarGroup's render method needs to be called to after removing renderers to see the changes applied.

#### render

`void render ( )`
Calls the render function of all child calendars within the group.

#### renderFooter

`void renderFooter ( )`
Renders a footer for the 2-up calendar container. By default, this method is unimplemented.

#### renderHeader

`void renderHeader ( )`
Renders the header for the CalendarGroup.

#### reset

`void reset ( )`
Resets the calendar widget to the originally selected month and year, and sets the calendar to the initial selection(s).

#### select

`Date[] select ( date )`
Selects a date or a collection of dates on the current calendar. This method, by default, does not call the render method explicitly. Once selection has completed, render must be called for the changes to be reflected visually.

Parameters:
  `date <String/Date/Date[]>` The date string of dates to select in the current calendar. Valid formats are individual date(s) (12/24/2005,12/26/2005) or date range(s) (12/24/2005-1/1/2006). Multiple comma-delimited dates can also be passed to this method (12/24/2005,12/11/2005-12/13/2005). This method can also take a JavaScript Date object or an array of Date objects.

Returns: `Date[]`
  Array of JavaScript Date objects representing all individual dates that are currently selected.

#### selectCell

`Date[] selectCell ( cellIndex )`
Selects dates in the CalendarGroup based on the cell index provided. This method is used to select cells without having to do a full render. The selected style is applied to the cells directly. The value of the MULTI_SELECT Configuration attribute will determine the set of dates which get selected.

- If MULTI_SELECT is false, selectCell will select the cell at the specified index for only the last displayed Calendar page.
- If MULTI_SELECT is true, selectCell will select the cell at the specified index, on each displayed Calendar page.

Parameters:
  `cellIndex <Number>` The index of the cell to be selected.

Returns: `Date[]`
  Array of JavaScript Date objects representing all individual dates that are currently selected.

#### setChildFunction

`void setChildFunction ( fnName , fn )`
Adds a function to all child Calendars within this CalendarGroup.

Parameters:
  `fnName <String>` The name of the function
  `fn <Function>` The function to apply to each Calendar page object

#### setMonth

`void setMonth ( month )`
Sets the calendar group's month explicitly. This month will be set into the first page of the multi-page calendar, and all other months will be iterated appropriately.

Parameters:
  `month <Number>` The numeric month, from 0 (January) to 11 (December)

#### setYear

`void setYear ( year )`
Sets the calendar group's year explicitly. This year will be set into the first page of the multi-page calendar, and all other months will be iterated appropriately.

Parameters:
  `year <Number>` The numeric 4-digit year

#### sub

`private void sub ( fn , obj , bOverride )`
Proxy subscriber to subscribe to the CalendarGroup's child Calendars' CustomEvents

Parameters:
  `fn <Function>` The function to subscribe to this CustomEvent
  `obj <Object>` The CustomEvent's scope object
  `bOverride <Boolean>` Whether or not to apply scope correction

#### subtractMonths

`void subtractMonths ( count )`
Subtracts the designated number of months from the current calendar month, and sets the current calendar page date to the new month.

Parameters:
  `count <Number>` The number of months to subtract from the current calendar

#### subtractYears

`void subtractYears ( count )`
Subtcats the designated number of years from the current calendar, and sets the current calendar page date to the new month.

Parameters:
  `count <Number>` The number of years to subtract from the current calendar

#### toString

`String toString ( )`
Returns a string representation of the object.

Returns: `String`
  A string representation of the CalendarGroup object.

#### unsub

`private void unsub ( fn , obj )`
Proxy unsubscriber to unsubscribe from the CalendarGroup's child Calendars' CustomEvents

Parameters:
  `fn <Function>` The function to subscribe to this CustomEvent
  `obj <Object>` The CustomEvent's scope object

### Events

#### beforeDeselectEvent

`beforeDeselectEvent ( )`
Fired before a date or set of dates is deselected

#### beforeDestroyEvent

`beforeDestroyEvent ( )`
Fired just before the CalendarGroup is to be destroyed

#### beforeHideEvent

`beforeHideEvent ( )`
Fired just before the CalendarGroup is to be hidden

#### beforeHideNavEvent

`beforeHideNavEvent ( )`
Fired just before the CalendarNavigator is to be hidden

#### beforeRenderEvent

`beforeRenderEvent ( )`
Fired before the Calendar is rendered

#### beforeRenderNavEvent

`beforeRenderNavEvent ( )`
Fired just before the CalendarNavigator is to be rendered

#### beforeSelectEvent

`beforeSelectEvent ( )`
Fired before a date selection is made

#### beforeShowEvent

`beforeShowEvent ( )`
Fired just before the CalendarGroup is to be shown

#### beforeShowNavEvent

`beforeShowNavEvent ( )`
Fired just before the CalendarNavigator is to be shown

#### changePageEvent

`changePageEvent ( )`
Fired when the Calendar page is changed

#### clearEvent

`clearEvent ( )`
Fired when the Calendar is cleared

#### deselectEvent

`deselectEvent ( Array )`
Fired when a date or set of dates has been deselected

Parameters:
  `Array <Array>` of Date field arrays in the format [YYYY, MM, DD].

#### destroyEvent

`destroyEvent ( )`
Fired after the CalendarGroup is destroyed. This event should be used for notification only. When this event is fired, important CalendarGroup instance properties, dom references and event listeners have already been removed/dereferenced, and hence the CalendarGroup instance is not in a usable state.

#### hideEvent

`hideEvent ( )`
Fired after the CalendarGroup is hidden

#### hideNavEvent

`hideNavEvent ( )`
Fired after the CalendarNavigator is hidden

#### renderEvent

`renderEvent ( )`
Fired when the Calendar is rendered

#### renderNavEvent

`renderNavEvent ( )`
Fired after the CalendarNavigator is rendered

#### resetEvent

`resetEvent ( )`
Fired when the Calendar is reset

#### selectEvent

`selectEvent ( Array )`
Fired when a date selection is made

Parameters:
  `Array <Array>` of Date field arrays in the format [YYYY, MM, DD].

#### showEvent

`showEvent ( )`
Fired after the CalendarGroup is shown

#### showNavEvent

`showNavEvent ( )`
Fired after the CalendarNavigator is shown

### Configuration Attributes

#### close `- Boolean`

Whether or not a close button should be displayed for this CalendarGroup
Default Value: false

#### DATE_DELIMITER `- String`

The value used to delimit individual dates in a date string passed to various Calendar functions.
Default Value: ","

#### DATE_FIELD_DELIMITER `- String`

The value used to delimit date fields in a date string passed to various Calendar functions.
Default Value: "/"

#### DATE_RANGE_DELIMITER `- String`

The value used to delimit date ranges in a date string passed to various Calendar functions.
Default Value: "-"

#### HIDE_BLANK_WEEKS `- Boolean`

True if the Calendar should suppress weeks that are not a part of the current month. False by default.
Default Value: false

#### iframe `- Boolean`

Whether or not an iframe shim should be placed under the Calendar to prevent select boxes from bleeding through in Internet Explorer 6 and below. This property is enabled by default for IE6 and below. It is disabled by default for other browsers for performance reasons, but can be enabled if required.
Default Value: true for IE6 and below, false for all other browsers

#### LOCALE_MONTHS `- String`

The setting that determines which length of month labels should be used. Possible values are "short" and "long".
Default Value: "long"

#### LOCALE_WEEKDAYS `- String`

The setting that determines which length of weekday labels should be used. Possible values are "1char", "short", "medium", and "long".
Default Value: "short"

#### maxdate `- String | Date`

The maximum selectable date in the current Calendar (mm/dd/yyyy)
Default Value: null

#### MD_DAY_POSITION `- Number`

The position of the day in a month/year date string
Default Value: 2

#### MD_MONTH_POSITION `- Number`

The position of the month in a month/day date string
Default Value: 1

#### MDY_DAY_POSITION `- Number`

The position of the day in a month/day/year date string
Default Value: 2

#### MDY_MONTH_POSITION `- Number`

The position of the month in a month/day/year date string
Default Value: 1

#### MDY_YEAR_POSITION `- Number`

The position of the year in a month/day/year date string
Default Value: 3

#### mindate `- String | Date`

The minimum selectable date in the current Calendar (mm/dd/yyyy)
Default Value: null

#### MONTHS_LONG `- String[]`

The long month labels for the current locale.
Default Value: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"

#### MONTHS_SHORT `- String[]`

The short month labels for the current locale.
Default Value: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]

#### MULTI_SELECT `- Boolean`

True if the Calendar should allow multiple selections. False by default.
Default Value: false

#### MY_LABEL_MONTH_POSITION `- Number`

The position of the month in the month year label string used as the Calendar header
Default Value: 1

#### MY_LABEL_MONTH_SUFFIX `- String`

The suffix used after the month when rendering the Calendar header
Default Value: " "

#### MY_LABEL_YEAR_POSITION `- Number`

The position of the year in the month year label string used as the Calendar header
Default Value: 2

#### MY_LABEL_YEAR_SUFFIX `- String`

The suffix used after the year when rendering the Calendar header
Default Value: ""

#### MY_MONTH_POSITION `- Number`

The position of the month in a month/year date string
Default Value: 1

#### MY_YEAR_POSITION `- Number`

The position of the year in a month/year date string
Default Value: 2

#### NAV `- Object`

Configuration for the Month Year Navigation UI. By default it is disabled
Default Value: null

#### NAV_ARROW_LEFT `- String`

The image that should be used for the left navigation arrow.
Deprecated You can customize the image by overriding the default CSS class for the left arrow - "calnavleft"
Default Value: null

#### NAV_ARROW_RIGHT `- String`

The image that should be used for the right navigation arrow.
Deprecated You can customize the image by overriding the default CSS class for the right arrow - "calnavright"
Default Value: null

#### pagedate `- String | Date`

The month/year representing the current visible Calendar date (mm/yyyy)
Default Value: Today's date

#### pages `- Number`

The number of pages to include in the CalendarGroup. This value can only be set once, in the CalendarGroup's constructor arguments.
Default Value: 2

#### selected `- String`

The date or range of dates representing the current Calendar selection
Default Value: []

#### SHOW_WEEK_FOOTER `- Boolean`

True if the Calendar should show week row footers. False by default.
Default Value: false

#### SHOW_WEEK_HEADER `- Boolean`

True if the Calendar should show week row headers. False by default.
Default Value: false

#### SHOW_WEEKDAYS `- Boolean`

True if the Calendar should show weekday labels. True by default.
Default Value: true

#### START_WEEKDAY `- number`

The weekday the week begins on. Default is 0 (Sunday).
Default Value: 0

#### strings `- {Object}`

The map of UI strings which the CalendarGroup UI uses.
Default Value: An object with the properties shown below:

previousMonth
  String : The string to use for the "Previous Month" navigation UI. Defaults to "Previous Month".
nextMonth
  String : The string to use for the "Next Month" navigation UI. Defaults to "Next Month".
close
  String : The string to use for the close button label. Defaults to "Close".

#### title `- String`

The title to display above the CalendarGroup's month header
Default Value: ""

#### today `- Date`

The date to use to represent "Today".
Default Value: Today's date

#### WEEKDAYS_1CHAR `- String[]`

The 1-character weekday labels for the current locale.
Default Value: ["S", "M", "T", "W", "T", "F", "S"]

#### WEEKDAYS_LONG `- String[]`

The long weekday labels for the current locale.
Default Value: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

#### WEEKDAYS_MEDIUM `- String[]`

The medium weekday labels for the current locale.
Default Value: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]

#### WEEKDAYS_SHORT `- String[]`

The short weekday labels for the current locale.
Default Value: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]

#### year_offset `- Number`

The positive or negative year offset from the Gregorian calendar year (assuming a January 1st rollover) to be used when displaying or parsing dates. NOTE: All JS Date objects returned by methods, or expected as input by methods will always represent the Gregorian year, in order to maintain date/month/week values.
Default Value: 0

Copyright © 2010 Yahoo! Inc. All rights reserved.