By default the <rich:calendar> is rendered as input filed with a button and calendar hidden in a pop-up. The button is represented with calendar pictogramm. This pictogramm could be easily changed with the help of "buttonIcon" and "buttonIconDisabled" attributes, which specify the icon for button enabled and disabled states respectively. To change the button appearance from icon to usual button define the value for the "buttonLabel" attribute. In this case "buttonIcon" and "buttonIconDisabled" attributes are ignored.

There are two attributes that specify the place where the popup calendar is rendered relative to the input field and icon: "jointPoint" and "direction" attributes. By default the pop-up calendar appears under input and aligned with it left border (see Fig. 6.211, b). Speaking in terms of RichFaces it means that <rich:calendar> jointPoint="bottom-left" and direction="bottom-right". There are four possible joint-points and four possible directions for each joint-point. Besides that, the values of "jointPoint" and "direction" could be set to "auto" that activates smart pop-up positioning.

Usage "currentDate" attribute isn't available in the popup mode.

With help of the "currentDate" attribute you can define month and year which will be displayed currently.

The "value" attribute stores selected date currently.

The difference between the value and currentDate attributes

The "todayControlMode" attribute defines the mode for "today" control. Possible values are:

With the help of the "readonly" attribute you can make date, time and input field unavailable, but you can look through the next/previous month or the next/previous year.

In order to disable the component, use the "disabled" attribute. With its help both controls are disabled in the "popup" mode.

"ondateselect" attribute is used to define an event that is triggered before date selection.

The "ondateselected" attribute is used to define an event that is triggered after date selection.

For example, to fire some event after date selection you should use <a4j:support> . And it should be bound to "ondateselected" event as it's shown in the example below:

...

<rich:calendar id="date" value="#{bean.dateTest}">

          <a4j:support event="ondateselected" reRender="mainTable"/>

</rich:calendar>

...

"ondateselect" could be used for possibility of date selection canceling. See an example below:

...

<rich:calendar id="date" value="#{bean.dateTest}" ondateselect="if (!confirm('Are you sure to change date?')){return false;}"/>

...

"oncurrentdateselected" event is fired when the "next/previous month" or "next/previous year" button is pressed, and the value is applied.

"oncurrentdateselect" event is fired when the "next/previous month" or "next/previous year" button is pressed, but the value is not applied yet (you can change the logic of applying the value). Also this event could be used for possibility of "next/previous month" or "next/previous year" selection canceling. See an example below:

Example:

...

<rich:calendar id="date" value="#{bean.dateTest}" oncurrentdateselect="if (!confirm('Are you sure to change month(year)?')){return false;}"

          oncurrentdateselected="alert('month(year) select:'+event.rich.date.toString());"/>

...

Simple example of usage is placed below.

Example:

...

<!-- Styles for cells -->

<style>

    .width100{

        width:100%;

    }

    .talign{

        text-align:center;

    }

</style>

...

...

<rich:calendar id="myCalendar" popup="true" locale="#{calendarBean.locale}" value="#{bean.date}"

                            preloadRangeBegin="#{bean.date}" preloadRangeEnd="#{bean.date}" cellWidth="40px" cellHeight="40px">



    <!-- Customization with usage of facets and accessible elements -->

    <f:facet name="header">

        <h:panelGrid columns="2" width="100%" columnClasses="width100, fake">

            <h:outputText value="{selectedDateControl}" />

            <h:outputText value="{todayControl}"  style="font-weight:bold; text-align:left"/>

        </h:panelGrid>

    </f:facet>

    <f:facet name="weekDay">

        <h:panelGroup style="width:60px; overflow:hidden;" layout="block">

            <h:outputText value="{weekDayLabelShort}"/>

        </h:panelGroup>

    </f:facet>

    <f:facet name="weekNumber">

         <h:panelGroup>

            <h:outputText value="{weekNumber}" style="color:red"/>

        </h:panelGroup>

     </f:facet>

     <f:facet name="footer">

        <h:panelGrid columns="3" width="100%" columnClasses="fake, width100 talign">

            <h:outputText value="{previousMonthControl}" style="font-weight:bold;"/>

            <h:outputText value="{currentMonthControl}" style="font-weight:bold;"/>

            <h:outputText value="{nextMonthControl}" style="font-weight:bold;"/>

        </h:panelGrid>

    </f:facet>

    <h:outputText value="{day}"></h:outputText>

</rich:calendar>

...

This is a result:

As it's shown on the picture above {selectedDateControl}, {todayControl} elements are placed in the "header" facet, {previousMonthControl}, {currentMonthControl}, {nextMonthControl} - in the "footer" facet, {weekDayLabelShort} - in the "weekDay" facet, {nextYearControl}, {previousYearControl} are absent. Numbers of weeks are red colored.

It is possible to show and manage date. Except scrolling controls you can use quick month and year selection feature. It's necessary to click on its field, i.e. current month control, and choose required month and year.

Also the <rich:calendar> component allows to show and manage time. It's necessary to define time in a pattern (for example, it could be defined as "d/M/yy HH:mm"). Then after you choose some data in the calendar, it becomes possible to manage time for this date. For time editing it's necessary to click on its field (see a picture below). To clean the field click on the "Clean".

It's possible to handle events for calendar from JavaScript code. A simplest example of usage JavaScript API is placed below:

Example:

...

<rich:calendar value="#{calendarBean.selectedDate}" id="calendarID"

                        locale="#{calendarBean.locale}"

                        popup="#{calendarBean.popup}"

                        datePattern="#{calendarBean.pattern}"

                        showApplyButton="#{calendarBean.showApply}" style="width:200px"/>

<a4j:commandLink onclick="$('formID:calendarID').component.doExpand(event)" value="Expand"/>

...