Object that provides a graphical representation and allows the selection of dates in a calendar. It can be used either on its own or in conjunction with an ENTRY FIELD or OUTPUT FIELD object, in which case the CALENDAR object sets the value of the Adelia field associated with the ENTRY FIELD or OUTPUT FIELD; the CALENDAR object is then said to be bound to a control.
Its graphical representation consists of a title bar (containing the current year and month) and a central box containing the days in the current month.
The title bar contains the following buttons (from left to right):
- The first button (left arrow) decrements the current month. Holding down this button decrements the month automatically.
- The second button (double left arrow) decrements the current year. Holding down this button decrements the year automatically.
- The third button (double right arrow) increments the current year. Holding down this button increments the year automatically.
- The fourth button (right arrow) increments the current month. Holding down this button increments the month automatically.
- The fifth button (down arrow) positions to the selected date.
- The sixth button (an 'X' on the right) closes the calendar.
This button is only displayed if the calendar is bound to a control with the F rame display type.
The use of bound controls (i.e. an ENTRY FIELD or OUTPUT FIELD used in conjunction with the CALENDAR) affects the calendar's graphical representation on the page:
- If the calendar is not bound to a control, it is displayed on the page as it is,
- If the calendar is bound to a control, it is not visible on the page. It is only represented by an image button. The calendar is displayed if the user clicks on the button. (Clicking the button again makes it disappear). If the user selects a date by clicking on a day, the date takes the value of the bound control.
You can move (drag-and-drop) a calendar that is bound to a control with the F rame display type by placing the mouse pointer over the current year or month's text.
The CALENDAR object's graphical representation adopts the characteristics (family, size and style) of the browser's default font. These parameters can be changed as follows:
- With Netscape, Mozilla and Firefox browsers, define a CSS class, setting a value for the font-family, font-size, font-style and font-weight attributes, and assign the CSS class to the MONTH_BACKGRND_CLASS property (during layout design or execution),
- With Microsoft browsers, you must also define a CSS class having the same attributes, with the selector (name) "#tableCal<Calendar name> table".
Example
For a calendar named CAL_1:
<style type="text/css">
.calendarFontXSmall {font-size:x-small; background-color:chartreuse;}
#tableCalCAL_1 table {font-size:x-small; }
</style>
In the Adelia code:
CAL_1:MONTH_BACKGROUND_COLOR_CLASS = 'calendarFontXSmall'
Images
It is possible to change the default images used in the CALENDAR object and in the image button that is created when the object is linked to a control. For display quality reasons, images with the same dimensions should ideally be used.
To change the images for all CALENDAR objects on the page, you must define a CSS class with a predefined name and set a value for the background-image attribute:
- To change the image for the first button (left arrow), you must define a class named AWSCalendarImgDecrMonth,
- To change the image for the second button (double left arrow), you must define a class named AWSCalendarImgDecrYear,
- To change the image for the third button (double right arrow), you must define a class named AWSCalendarImgIncrYear,
- To change the image for the fourth button (right arrow), you must define a class named AWSCalendarImgIncrMonth,
- To change the image for the fifth button (down arrow), you must define a class named AWSCalendarImgGotoDateSel,
- To change the image for the sixth button ('X' close button), you must define a class named AWSCalendarImgClose,
- To change the image for the button that reveals the CALENDAR object (if it is linked to a control), you must define a class named AWSCalendarImgOpen.
Example: To change the button image for all CALENDAR objects linked to a control on the page,
<style type="text/css">
.AWSCalendarImgOpen {background-image: URL(“../images/open.gif”);}
</style>
- To change the images for one CALENDAR object on the page, you must define an CSS class with an identifier name followed by the object name, and set a value for the background-image attribute:
- To change the image for the first button (left arrow), you must define a class named decrMonth<Calendar name>,
- To change the image for the second button (double left arrow), you must define a class named decrYear<Calendar name>,
- To change the image for the third button (double right arrow), you must define a class named incrYear<Calendar name>,
- To change the image for the fourth button (right arrow), you must define a class named incrMonth<Calendar name>,
- To change the image for the fifth button (down arrow), you must define a class named gotoDateSelect<Calendar name>,
- To change the image for the sixth button ('X' close button), you must define a class named closeCal<Calendar name>,
- To change the image for the button that reveals the CALENDAR object (if it is linked to a control), you must define a class named <Calendar name> BtnImg.
Example: To change the Close button image for the CALENDAR object named CAL_1,
<style type="text/css">
#closeCalCAL_1 {background-image: URL(“../images/close.gif”);}
</style>
Click below for more details on: