Calendar

Changes <input type='text'> and <div>into a visible mini calendar with an associated non-visible input field that holds the value (currently selected date) of the calendar.

Styles can be applied to the mini calendar via CSS. The component handles the same calendars as the DateTimeConverter.

JSF tags that emit the component

<hx:inputMiniCalendar>

Base HTML

<input type="text" id="id_INPUT"><div id="id">

The value of the calendar is passed as the value of the input field. The value should be formatted in the style described by the converter associated with the component. If no value is initially passed to the page, the calendar has no initial value.

Event handlers associated with the calendar should be set on the input field. Only onfocus, onblur and onchange are currently supported.

The JSFCalendar component displays a mini calendar with an associated (non visible) input field.

The Calendar value (the currently selected value in the Calendar) is kept in the input field. The input field is active; therefore, the selected value is transmitted from and to the server in this field when the page is submitted.

The visible Calendar is displayed as a div that is styled via the set of CSS classes listed below.

The Calendar supports all of the calendar types (for example Gregorian) via the DateTimeConverter. The converter is used to change the value of the input field (a string) to and from a JavaScriptâ„¢ date object. It is also used to format the month, year, and day of week displayed in the Calendar. The converter should be constructed before the Calendar is constructed and the ID of the converter passed to the Calendar. The input field can also be associated with a DateTimeValidator. If a validator is associated with the input field, it must be passed to the Calendar (as an attribute of the constructor).

JavaScript constructor

hX_5.addComponent("id", new hX_5.JSFCalendar(attributes)); where

id

The ID of the HTML tag to which the component is attached.

attributes

Comma separated list of attributes where each attribute is a quoted string consisting of the attribute name and value separated by a colon, for example "label:MyLabel".

Attributes

Table 1. JSFCalendar attributes

Attribute name

Description

css-prefix

The base class of a set of CSS classes that describe the visual appearance.

converter

The ID of a converter that has already been constructed. The converter describes the format of the value in the input field.

disabled

Specifies if the object is available.

first-day-of-week

Day of the week that is treated as the first day of the week. Zero means Sunday.

multi-line

If true, the header over the calendar is displayed as two lines (year and month) with independent buttons that control the month and year. If false, the year and month are displayed on one line with buttons that control only the month.

validator

The ID of a validator that has already been constructed. If the validator is supplied, the constraints described in the validator are used limit the values a user can pick.

CSS classes

The class structure is identical to the date picker except for the size class that is not used by the calendar.

Table 2. JSFCalendar CSS classes

CSS class name

Description

base

Styles the outermost div that contains the calendar. To explicitly control the size of the calendar, specify the width (height) properties in this class.

<base>-size

Styles the outermost table that organizes the calendar into header and body areas.

<base>-Header

Styles the table inside the calendar table that contains the three header rows (the year row, the month row and the days of the week row).

<base>-HeaderLine1

Within the header table, styles the cells in the first row (the year row) of the table that do not contain the year.

<base>-HeaderLine2

Within the header table, styles the cells in the second row (the month row) of the table that do not contain the month.

<base>-HeaderWeekday

Within the header table, styles the cells in the third row (the weekday row) of the table.

<base>-HeaderYear

Within the header table, styles middle table cell in the first row that contains the year.

<base>-HeaderMonth

Within the header table, styles middle table cell in the second row that contains the month.

<base>-Button

Within the header table, in the first and second rows, styles the four buttons used to scroll the calendar.

<base>-Body

Styles the table inside the calendar table that contains the days.

<base>-CurrentMonth

Within the body table, styles a table cell that contains a day in the current month.

<base>-OtherMonth

Within the body table, styles a table cell that contains a day not in the current month (for example the last days of the previous month or the first days of the next month that need to be displayed before/after the days in the currently selected month).

<base>-InvalidDay

Within the body table, styles a table cell that contains a day that may not be selected because such a day is not allowed by the validator attached to the date.

<base>-CurrentDay

Within the body table, styles the table cell that contains the currently selected day.

<base>-Today

Within the body table, styles the table cell that represents the current date.

<base>-CurrentToday

Within the body table, if currently selected day is the same as the currectdate, then styles the table cell that represents both today's date and the current selection.

<base>-Hover

Defines the style that is added to the style of a day when the day has mouse or keyboard focus.

API calls

Table 3. JSF calendar API calls

API call

Description

redraw()

Redraw the component taking into account any changes made to the attributes/properties of the base tag.

uirelease()

Releases any active UI associated with the component.

setValue(string)

Sets the value of the component and ensures that the value provided is valid.

object = getValue(boolean)

Retrieves the value of the component. If the boolean is false, this is equivalent to getting the value of the base tag. If the boolean is true, the value is returned as a JavaScript date/time object instead of as a string.

object = setAttribute(attribute)

Sets an attribute or changes its value (if it was set previously).

string = getAttribute(attribute-name)

Retrieves the current value of an attribute.

Accessibility

The Calendar is keyboard accessible. The Calendar is in the tab order of the page (as a single entry). When the Calendar has keyboard focus (for example someone tabs to it or clicks on it), the currently selected date is available to screen readers as the value of the input field (that holds physical focus). While the Calendar has focus, pressing spacebar (or newline) selects the currently selected day. Pressing the left, right, up and down arrows changes the selected day. Pressing SHIFT left/right arrow changes the month and pressing SHIFT up/down arrow changes the selected year. Pressing PgUp and PgDn changes the month. Pressing Home or End goes to the first or last day of the month.

The Calendar currently does not report XML roles or states (although it is XHTML compliant).

Limitations

Example code

Add an Islamic calendar to a page. Restrict the valid dates to only those in the year 1427 AH.

<input type="text" id="form1:calendar1_INPUT" value="Muharram 01, 1427 AH" />
<div id="form1:calendar1" />
<script>
hX.addConverter("A", new hX.DateTimeConverter("strict:1", "ICU4J", "epoch:i", format:MMMM dd, yyyy G"));
hX.addValidator("B", new hX.DateTimeValidator("minimum-bound:20060130000000", "maximum-bound:20070118000000"));
hX.addComponent("form1:calendar1_CAL_DIV", new hX.JSFCalendar("converter:A","validator:B", "first-day-of-week:6", "multi-line:false"));
</script>

Feedback