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.

The <rich:calendar> component can render pages of days in two modes. A mode could be defined with the "mode" attribute with two possible parameters: "ajax" and "client". Default value is "client".

Calendar requests portions of data from Data Model for a page rendering. If "dataModel" attribute has "null" value, data requests are not sent. In this case the "ajax" mode is equal to the "client".

Calendar loads an initial portion of data in a specified range and use this data to render months. Additional data requests are not sent.

"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"/>

...

In the example an active cell background color was changed.

Also it's possible to change styles of particular <rich:calendar> component. In this case you should create own style classes and use them in corresponding <rich:calendar> styleClass attributes. An example is placed below:

Example:

...

.myFontClass{

    font-style: italic;

}

...

The "inputClass" attribute for <rich:calendar> is defined as it's shown in the example below:

Example:

<rich:calendar ... inputClass="myFontClass"/>

This is a result:

As it could be seen on the picture above, the font style for output text was changed.