Class xbPopupCalendar — a JavaScript object for creating dynamic pop-up calendar widgets using the W3C DOM. Contributed by Jeremy Hoppe.
extends Class xbCalendar
class xbPopupCalendar : xbCalendar
{
public:
xbPopupCalendar(String id,
Date dateObj,
String classprefix,
String dayNameFormat,
Number firstDayOfWeek,
Window windowRef);
// properties
HTMLElement div;
HTMLElement navBar;
HTMLElement nextMonthNav;
HTMLElement nextYearNav;
HTMLElement prevMonthNav;
HTMLElement prevYearNav;
Boolean visible;
// methods
void destroy();
HTMLElement getNode();
void hide();
Boolean isVisible();
void setDate(Date dateObj);
void show(Number x, Number y);
void showAdjacentTo(HTMLElement refElem,
String direction,
Number xOffset,
Number yOffset);
HTMLElement getNextMonthNav();
void setNextMonthNav(HTMLElement node);
HTMLElement getNextYearNav();
void setNextYearNav(HTMLElement node);
HTMLElement getPrevMonthNav();
void setPrevMonthNav(HTMLElement node);
HTMLElement getPrevYearNav();
void setPrevYearNav(HTMLElement node);
// events
Boolean ondatechange(Date dateObj);
Boolean ondatechoose(Date dateObj);
// Static class properties
String nextMonthMsg;
String nextYearMsg;
String prevMonthMsg;
String prevYearMsg;
private:
// internal state properties
Boolean _fireChooseEvent;
}
Uses:
The class from which xbPopupCalendar is derived.
provides class management facilities.
xbPopupCalendar is a JavaScript object which implements a popup calendar widget for Gecko-based browsers (Netscape 6.1+, Netscape 7, CompuServe 7), and Internet Explorer 5.5+ for Windows. Support for Internet Explorer 5.x for the Macintosh has yet to be determined.
An xbPopupCalendar widget can be shown at any x,y point on a page, or adjacent to a given element, to allow a user to choose a date. The available dates the user has to choose from can be controlled though setting xbPopupCalendar's minDate and maxDate properties. The ondatechange and ondatechoose events can also be used to provide control over which dates can be chosen. See xbCalendar's examples section for examples of using both of these techniques.
Event Notification/Firing. It should be noted that xbPopupCalendar differs in it's event notification from xbCalendar in that it does not fire the ondatechange event for every date change. xbPopupCalendar fires the ondatechoose event whenever a user changes the date by clicking on a link inside the calendar ('choosing' it), and fires the ondatechange event for all other date changes. This is done to this to provide a distinction between the user choosing a date, and the date changing as a result of clicking on the navigation buttons, or the date being set programmatically.
Specifying Custom Navigation Buttons. xbPopupCalendar contains four navigational buttons which allow the user to navigate the calendar forwards and backwards though available months and years. These buttons are simple text links which can be styled using CSS (see section below). You may also specify custom navigational buttons to be used with an xbPopupCalendar widget, in place of the default text links, using a set of get/set methods. Example 02 illustrates how this can be done.
Like xbCalendar, the display of xbPopupCalendar widgets is controlled through the use of CSS classes. xbPopupCalendar includes several additional elements that may be styled via CSS. For more information on this technique, see the xbCalendar documentation.
Name of CSS class for the absolutely-positioned popup div. HTML tag: DIV
Name of CSS class for the calendar navigation bar. HTML tag: DIV
Name of CSS class for the links in the calendar navigation bar. HTML tag: A
Note: If custom navigational elements are specified for an xbPopupCalendar widget, those elements do not use this CSS class name. You may style custom navigational elements by using a CSS rule such as 'div.classprefixnavBar elementName' in your stylesheet, or by assigning a value to it's ID attribute, or assigning it a custom CSS class name.
Example 2. Example 02
This example illustrates how custom navigation buttons can be used with an xbPopupCalendar widget.
This section lists all of the properties defined in xbPopupCalendar.js. xbPopupCalendar inherits many other properties from xbCalendar that are not listed here. See the xbCalendar Manpage.
readonly HTMLElement - reference to the popup div element that contains the calendar and navigation bar.
readonly HTMLElement - reference to the div element that contains the navigational elements.
readonly HTMLElement - reference to the element being used as the 'next-month' navigation button.
readonly HTMLElement - reference to the element being used as the 'next-year' navigation button.
readonly HTMLElement - reference to the element being used as the 'previous-month' navigation button.
readonly HTMLElement - reference to the element being used as the 'previous-year' navigation button.
readonly Boolean - true if the widget is currently visible.
This section lists all of the methods defined in xbPopupCalendar.js. xbPopupCalendar inherits many other methods from xbCalendar that are not listed here. See the xbCalendar Manpage.
Constructs an instance of xbPopupCalendar.
Arguments: Please see the xbCalendar Manpage for the constructor reference.
Overrides xbCalendar.destroy(). Destroys this instance of xbPopupCalendar.
Returns. Nothing
Overrides xbCalendar.getNode(). Returns the HTMLElement for this widget that should be inserted into the document tree.
Returns. The HTMLElement to be inserted into the DOM document tree.
Hides the xbPopupCalendar widget.
Note that this method will automatically be called when the user selects a date unless an ondatechoose event handler returns false.
Returns. Nothing
Returns. Boolean true if popup calendar widget is visible.
Overrides xbCalendar.setDate(). Sets the date that the calendar should display.
If the date represented by dateObj is not within the range specified by the minDate and maxDate properties, this method will return without refreshing the calendar.
Arguments: Date dateObj - the date that the calendar should display.
Returns. Nothing
Shows the popup calendar widget at the specified x,y coordinates.
Arguments:
Number x - the x-coordinate, in pixels.
Number y - the y-coordinate, in pixels.
Returns. Nothing
Shows the popup calendar widget adjacent to refElem, in the specified direction.
Arguments:
HTMLElement refElem - the element to show the popup calendar widget adjacent to.
String direction - the direction, relative to refElem, in which to show the widget. Valid directions are:
Number xOffset - optional - pixels to be added to the widget's computed x-coordinate.
Number yOffset - optional - pixels to be added to the widget's computed y-coordinate.
Returns. Nothing
Returns. HTMLElement the element being used as the 'next-month' navigation button.
Allows you to specify a custom 'next-month' navigation button for the popup widget.
Arguments: HTMLElement node - the element to be used as the 'next-month' navigation button.
Returns. Nothing
Returns. HTMLElement the element being used as the 'next-year' navigation button.
Allows you to specify a custom 'next-year' navigation button for the popup widget.
Arguments: HTMLElement node - the element to be used as the 'next-year' navigation button.
Returns. Nothing
Returns. HTMLElement the element being used as the 'previous-month' navigation button.
Allows you to specify a custom 'previous-month' navigation button for the popup widget.
Arguments: HTMLElement node - the element to be used as the 'previous-month' navigation button.
Returns. Nothing
Returns. HTMLElement the element being used as the 'previous-year' navigation button.
Allows you to specify a custom 'previous-year' navigation button for the popup widget.
Arguments: HTMLElement node - the element to be used as the 'previous-year' navigation button.
Returns. Nothing
Fired when the calendar's date is about to change. Event handlers may return false to cancel the change.
Note that the criteria used to fire this event is not the same as that used by xbCalendar. See the section titled 'Event Handling/Notification' in this document.
Supplied parameters: Date dateObj - the date that is about to be displayed by the calendar.
Event return values:
Fired when the user 'chooses' their desired date in the calendar by clicking on one of the links. Event handlers may return false to cancel the change.
Supplied parameters: Date dateObj - the date that is about to be displayed by the calendar.
Event return values:
These static class properties contain informational messages that are attached to an xbPopupCalendar widget's four navigational buttons. These messages will be displayed to the user:
String - contains the informational message for the 'next-month' navigation button.
String - contains the informational message for the 'next-year' navigation button.
String - contains the informational message for the 'previous-month' navigation button.
String - contains the informational message for the 'previous-year' navigation button.
These properties are used internally by xbPopupCalendar, and should not be modified or relied upon by outside code.
readonly Boolean - true if the ondatechoose event should be fired because the user has clicked on a date (a hyperlink) in the calendar.