6.24.  < rich:calendar >

6.24.1. Description

The <rich:calendar> component is used for creating monthly calendar elements on a page.

<rich:calendar> component

Figure 6.1.  <rich:calendar> component


6.24.2. Key Features

  • Highly customizable look and feel

  • Popup representation

  • Disablement support

  • Smart and user-defined positioning

  • Cells customization

  • Macro substitution based on tool bars customization

Table 6.47. rich : calendar attributes

Attribute NameDescription
ajaxSingleif "true", submits ONLY one field/link, instead of all form controls. Default value is "true".
bindingThe attribute takes a value-binding expression for a component property of a backing bean
boundaryDatesModeUsed for the dates boundaries in the list. Valid values are "inactive" (Default) dates inactive and gray colored, "scroll" boundaries work as month scrolling controls, and "select" boundaries work in the same way as "scroll" but with the date clicked selection. Default value is "inactive".
buttonClassStyle Class attribute for the popup button
buttonIconDefines icon for the popup button element. The attribute is ignored if the "buttonLabel" is set
buttonIconDisabledDefines disabled icon for the popup button element. The attribute is ignored if the "buttonLabel" is set
buttonLabelDefines label for the popup button element. If the attribute is set "buttonIcon" and "buttonIconDisabled" are ignored
bypassUpdatesIf "true", after process validations phase it skips updates of model beans on a force render response. It can be used for validating components input
cellHeightattribute to set fixed cells height
cellWidthattribute to set fixed cells width
converterId of Converter to be used or reference to a Converter
converterMessageA ValueExpression enabled attribute that, if present, will be used as the text of the converter message, replacing any message that comes from the converter
currentDateDefines current date
currentDateChangeListenerMethodBinding representing an action listener method that will be notified after date selection
dataModelUsed to provide data for calendar elements. If data is not provided, all Data Model related functions are disabled
datePatternDefines date pattern. Default value is "MMM d, yyyy".
dayStyleClassShould be binded to some JS function that will provide style classes for special sets of days highlighting.
directionDefines direction of the calendar popup (top-left, top-right, bottom-left, bottom-right (Default), auto). Default value is "bottom-right".
disabledIf "true", rendered is disabled. In "popup" mode both controls are disabled. Default value is "false".
enableManualInputIf "true" calendar input will be editable and it will be possible to change the date manualy. If "false" value for this attribute makes a text field "read-only", so the value can be changed only from a handle. Default value is "false".
eventsQueueName of requests queue to avoid send next request before complete other from same event. Can be used to reduce number of requests of frequently events (key press, mouse move etc.)
firstWeekDayGets what the first day of the week is; e.g., SUNDAY in the U.S., MONDAY in France. Default value is "getDefaultFirstWeekDay()".
focusid of element to set focus after request completed on client side
horizontalOffsetSets the horizontal offset between button and calendar element conjunction point. Default value is "0".
idEvery component may have a unique id that is automatically created if omitted
ignoreDupResponsesAttribute allows to ignore an Ajax Response produced by a request if the newest 'similar' request is in a queue already. ignoreDupResponses="true" does not cancel the request while it is processed on the server, but just allows to avoid unnecessary updates on the client side if the response isn't actual now
immediateA flag indicating that this component value must be converted and validated immediately (that is, during Apply Request Values phase), rather than waiting until a Process Validations phase
inputClassStyle Class attribute for the text field
inputSizeDefines the size of an input field. Similar to the "size" attribute of <h:inputText/>
inputStyleStyle attribute for text field
isDayEnabledShould be binded to some JS function that returns day state.
jointPointSet the corner of the button for the popup to be connected with (top-left, top-right, bottom-left (Default), bottom-right, auto). Default value is "bottom-left".
labelA localized user presentable name for this component.
limitToListIf "true", updates on client side ONLY elements from this 'reRender' property. If "false" (default) updates all rendered by ajax region components
localeUsed for locale definition. Default value is "getDefaultLocale()".
minDaysInFirstWeekGets what the minimal days required in the first week of the year are; e.g., if the first week is defined as one that contains the first day of the first month of a year, this method returns 1. If the minimal days required must be a full week, this method returns 7. Default value is "getDefaultMinDaysInFirstWeek()".
modeValid values: ajax or client. Default value is "client".
monthLabelsAttribute that allows to customize names of the months. Should accept list with the month names
monthLabelsShortAttribute that allows to customize short names of the months. Should accept list with the month names
onbeforedomupdateJavaScript code for call before DOM has been updated on client side
onchangedonChanged event handler
oncollapseonCollapse event handler
oncompleteJavaScript code for call after request completed on client side
oncurrentdateselectonCurrentDateSelect event handler
oncurrentdateselectedonCurrentDateSelected event handler
ondatemouseoutonDateMouseOut event handler
ondatemouseoveronDateMouseOver event handler
ondateselectonDateSelect event handler
ondateselectedonDateSelected event handler
onexpandonExpand event handler
oninputblurinput onBlur event handler
oninputchangeinput onChange event handler
oninputclickinput onClick event handler
oninputfocusinput onFocus event handler
oninputkeydowninput onKeyDown event handler
oninputkeypressinput onKeyPress event handler
oninputkeyupinput onKeyUp event handler
oninputselectinput onSelect event handler
ontimeselectonTimeSelect event handler
ontimeselectedonTimeSelected event handler
popupIf "true" calendar will be rendered initially as hidden with additional elements for calling as popup. Default value is "true".
preloadDateRangeBeginDefine the initial range of date which will be loaded to client from dataModel under rendering. Default value is "getDefaultPreloadBegin(getCurrentDateOrDefault())".
preloadDateRangeEndDefines the last range of date which will be loaded to client from dataModel under rendering. Default value is "getDefaultPreloadEnd(getCurrentDateOrDefault())".
processId['s] (in format of call UIComponent.findComponent()) of components, processed at the phases 2-5 in case of AjaxRequest caused by this component. Can be single id, comma-separated list of Id's, or EL Expression with array or Collection
renderedIf "false", this component is not rendered
requestDelayAttribute defines the time (in ms.) that the request will be wait in the queue before it is ready to send. When the delay time is over, the request will be sent to the server or removed if the newest 'similar' request is in a queue already
requiredIf "true", this component is checked for non-empty input
requiredMessageA ValueExpression enabled attribute that, if present, will be used as the text of the validation message for the "required" facility, if the "required" facility is used
reRenderId['s] (in format of call UIComponent.findComponent()) of components, rendered in case of AjaxRequest caused by this component. Can be single id, comma-separated list of Id's, or EL Expression with array or Collection
showApplyButtonIf false ApplyButton should not be shown. Default value is "false".
showFooterIf false Calendar's footer should not be shown. Default value is "true".
showHeaderIf false Calendar's header should not be shown. Default value is "true".
showInput"false" value for this attribute makes text field invisible. If "true" - input field will be shown. Default value is "true".
showWeekDaysBarIf false this bar should not be shown. Default value is "true".
showWeeksBarIf false this bar should not be shown. Default value is "true".
statusID (in format of call UIComponent.findComponent()) of Request status component
styleCSS style(s) is/are to be applied when this component is rendered
styleClassCorresponds to the HTML class attribute
timeoutResponse waiting time on a particular request. If a response is not received during this time, the request is aborted
timeZoneUsed for current date calculations. Default value is "getDefaultTimeZone()".
todayControlModePossible values are "scroll", "select", "hidden". Default value is "select".
toolTipModeUsed to specify mode to load tooltips. Valid values are "none", "single" and "batch" Default value is "batch".
validatorMethodBinding pointing at a method that is called during Process Validations phase of the request processing lifecycle, to validate the current value of this component
validatorMessageA ValueExpression enabled attribute that, if present, will be used as the text of the validator message, replacing any message that comes from the validator
valueThe current value of this component
valueChangeListenerListener for value changes
verticalOffsetSets the vertical offset between button and calendar element conjunction point. Default value is "0".
weekDayLabelsList of the day names displays on the days bar in the following way "Sun, Mon, Tue, Wed, "
weekDayLabelsShortAttribute that allows to customize short names of the weeks. Should accept list with the weeks names.
zindexAttribute is similar to the standard HTML attribute and can specify window placement relative to the content. Default value is "3".

Table 6.48. Component identification parameters

NameValue
component-typeorg.richfaces.Calendar
component-classorg.richfaces.component.html.HtmlCalendar
component-familyorg.richfaces.Calendar
renderer-typeorg.richfaces.CalendarRenderer
tag-classorg.richfaces.taglib.CalendarTag

6.24.3. Creating the Component with a Page Tag

To create the simplest variant on a page use the following syntax:

Example:


...
      <rich:calendar popup="false"/>
...

6.24.4. Creating the Component Dynamically Using Java

Example:


import org.richfaces.component.html.HtmlCalendar;   
...
HtmlCalendar myCalendar = new HtmlCalendar();
...

6.24.5. Details of Usage

The "popup" attribute defines calendar representation mode on a page. If it's "true" the calendar is represented on a page as an input field and a button. Clicking on the button calls the calendar popup as it's shown on the picture below.

Using the "popup" attribute: calendar calls after you click on the button.

Figure 6.2. Using the "popup" attribute: calendar calls after you click on the button.


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

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

  • Ajax

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

  • 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.

Note:

"preloadDateRangeBegin" and "preloadDateRangeEnd" attributes was designed only for the "client" mode to load some data initially.

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

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

"ondataselect" 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;}"/>
    ...

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

"oncurrentdataselect" 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 upplying 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());"/>
 ...

How to use these attributes see also on the RichFaces Users Forum.

Information about the "process" attribute usage you can find here.

There are three button-related attributes:

  • "buttonLabel" defines a label for the button. If the attribute is set "buttonIcon" and "buttonIconDisabled" are ignored

  • "buttonIcon" defines an icon for the button

  • "buttonIconDisabled" defines an icon for the disabled state of the button

The "direction" and "jointPoint" attributes are used for defining aspects of calendar appearance.

The possible values for the "direction" are:

  • top-left - a calendar drops to the top and left

  • top-right - a calendar drops to the top and right

  • bottom-left - a calendar drops to the bottom and left

  • bottom-right - a calendar drops to the bottom and right

  • auto - smart positioning activation

By default, the "direction" attribute is set to "bottom-right".

The possible values for the "jointPoint" are:

  • top-left - a calendar docked to the top-left point of the button element

  • top-right - a calendar docked to the top-right point of the button element

  • bottom-left - a calendar docked to the bottom-left point of the button element

  • bottom-right - a calendar docked to the bottom-right point of the button element

  • auto - smart positioning activation

By default, the "jointPoint" attribute is set to "bottom-left".

The "label" attribute is a generic attribute. The "label" attribute provides an association between a component, and the message that the component (indirectly) produced. This attribute defines the parameters of localized error and informational messages that occur as a result of conversion, validation, or other application actions during the request processing lifecycle. With the help of this attribute you can replace the last parameter substitution token shown in the messages. For example, {1} for “DoubleRangeValidator.MAXIMUM”, {2} for “ShortConverter.SHORT”.

The <rich:calendar> component allows to use "header" , "footer" , "optionalHeader" , "optionalFooter" facets. The following elements are available in these facets: {currentMonthControl}, {nextMonthControl}, {nextYearControl}, {previousYearControl}, {previousMonthControl}, {todayControl}, {selectedDateControl}. These elements could be used for labels output.

Also you can use "weekNumber" facet with available {weekNumber}, {elementId} elements and "weekDay" facet with {weekDayLabel}, {weekDayLabelShort}, {weekDayNumber}, {isWeekend}, {elementId} elements. {weekNumber}, {weekDayLabel}, {weekDayLabelShort}, {weekDayNumber} elements could be used for labels output, {isWeekend}, {elementId} - for additional processing in JavaScript code.

These elements are shown on the picture below.

Available elements

Figure 6.3. Available elements


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}" selectedDate="#{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:

Facets usage

Figure 6.4. Facets usage


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.

Quick month and year selection

Figure 6.5. Quick month and year selection


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

Timing

Figure 6.6. Timing


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

Also the discussion about this problem can be found on the RichFaces Users Forum.

The <rich:calendar> component provides the possibility to use a special Data Model to define data for element rendering. Data Model includes two major interfaces:

  • CalendarDataModel

  • CalendarDataModelItem

CalendarDataModel provides the following function:

  • CalendarDataModelItem[] getData(Date[]);

This method is called when it's necessary to represent the next block of CalendarDataItems. It happens during navigation to the next (previous) month or in any other case when calendar renders. This method is called in "Ajax" mode when the calendar renders a new page.

CalendarDataModelItem provides the following function:

  • Date getDate() - returns date from the item. Default implementation returns date.

  • Boolean isEnabled() - returns "true" if date is "selectable" on the calendar. Default implementation returns "true".

  • String getStyleClass() - returns string appended to the style class for the date span. For example it could be "relevant holyday". It means that the class could be defined like the "rich-cal-day-relevant-holyday" one. Default implementation returns empty string.

  • Object getData() - returns any additional payload that must be JSON-serializable object. It could be used in the custom date representation on the calendar (inside the custom facet).

The <rich:calendar> component provides the possibility to use internationalization method to redefine and localize the labels. You could use application resource bundle and define RICH_CALENDAR_APPLY_LABEL, RICH_CALENDAR_TODAY_LABEL, RICH_CALENDAR_CLOSE_LABEL, RICH_CALENDAR_OK_LABEL, RICH_CALENDAR_CLEAN_LABEL, RICH_CALENDAR_CANCEL_LABEL there.

You could also pack org.richfaces.renderkit.calendar resource bundle with your JARs defining the same properties.

6.24.6. JavaScript API

Table 6.49. JavaScript API

FunctionDescription
selectDate(date)Selects the date specified. If the date isn't in current month - performs request to select
isDateEnabled(date)Checks if given date is selectable
enableDate(date)Enables date cell control on the calendar
disableDate(date)Disables date cell control on the calendar
enableDates(date[])Enables dates cell controls set on the calendar
disableDates(date[])Disables dates cell controls set on the calendar
nextMonth()Navigates to next month
nextYear()Navigates to next year
prevMonth()Navigates to previous month
prevYear()Navigates to previous year
today()Selects today date
getSelectedDate()Returns currently selected date
Object getData()Returns additional data for the date
getCurrentMonth()Returns number of the month currently being viewed
getCurrentYear()Returns number of the year currently being viewed
doCollapse()Collapses calendar element
doExpand()Expands calendar element
resetSelectedDate()Clears a selected day value
doSwitch()Inverts a state for the popup calendar

6.24.7. Look-and-Feel Customization

For skinnability implementation, the components use a style class redefinition method. Default style classes are mapped on skin parameters.

There are two ways to redefine the appearance of all <rich:calendar> components at once:

  • Redefine the corresponding skin parameters

  • Add to your style sheets style classes used by a <rich:calendar> component

6.24.8. Skin Parameters Redefinition

Table 6.50. Skin parameters redefinition for a popup element

Skin parametersCSS properties
panelBorderColorborder-color

Table 6.51. Skin parameters redefinition for headers (header, optional header)

Skin parametersCSS properties
panelBorderColorborder-bottom-color
additionalBackgroundColorbackground-color
generalSizeFontfont-size
generalFamilyFontfont-family

Table 6.52. Skin parameters redefinition for footers (footer, optional footer) and names of working days

Skin parametersCSS properties
panelBorderColorborder-top-color
panelBorderColorborder-right-color
additionalBackgroundColorbackground
generalSizeFontfont-size
generalFamilyFontfont-family

Table 6.53. Skin parameters redefinition for weeks numbers

Skin parametersCSS properties
panelBorderColorborder-bottom-color
panelBorderColorborder-right-color
additionalBackgroundColorbackground
calendarWeekBackgroundColorbackground-color
generalSizeFontfont-size
generalFamilyFontfont-family

Table 6.54. Skin parameters redefinition for a toolBar and names of months

Skin parametersCSS properties
headerBackgroundColorbackground-color
headerSizeFontfont-size
headerFamilyFontfont-family
headerWeightFontfont-weight
headerTextColorcolor

Table 6.55. Skin parameters redefinition for cells with days

Skin parametersCSS properties
panelBorderColorborder-bottom-color
panelBorderColorborder-right-color
generalBackgroundColorbackground-color
generalSizeFontfont-size
generalFamilyFontfont-family

Table 6.56. Skin parameters redefinition for holiday

Skin parametersCSS properties
calendarHolidaysBackgroundColorbackground-color
calendarHolidaysTextColorcolor

Table 6.57. Skin parameters redefinition for cell with a current date

Skin parametersCSS properties
calendarCurrentBackgroundColorbackground-color
calendarCurrentTextColorcolor

Table 6.58. Skin parameters redefinition for a selected day

Skin parametersCSS properties
headerBackgroundColorbackground-color
headerTextColorcolor
headerWeightFontfont-weight

Table 6.59. Skin parameters redefinition for a popup element during quick month and year selection

Skin parametersCSS properties
tableBackgroundColorbackground
panelBorderColorborder-color

Table 6.60. Skin parameters redefinition for a shadow

Skin parametersCSS properties
shadowBackgroundColorbackground-color

Table 6.61. Skin parameters redefinition for a selected month and year

Skin parametersCSS properties
calendarCurrentBackgroundColorbackground-color
calendarCurrentTextColorcolor

Table 6.62. Skin parameters redefinition for a hovered month and year

Skin parametersCSS properties
panelBorderColorborder-color
calendarSpecBackgroundColorbackground

Table 6.63. Skin parameters redefinition for a month items near split line

Skin parametersCSS properties
panelBorderColorborder-right-color

Table 6.64. Skin parameters redefinition for a hovered toolbar items

Skin parametersCSS properties
calendarWeekBackgroundColorbackground-color
generalTextColorcolor
tableBackgroundColorborder-color
panelBorderColorborder-right-color
panelBorderColorborder-bottom-color

Table 6.65. Skin parameters redefinition for a pressed toolbar items

Skin parametersCSS properties
panelBorderColorborder-color
tableBackgroundColorborder-right-color
tableBackgroundColorborder-bottom-color

Table 6.66. Skin parameters redefinition for "ok" and "cancel" buttons

Skin parametersCSS properties
additionalBackgroundColorbackground
panelBorderColorborder-top-color

Table 6.67. Skin parameters redefinition for a popup element during time selection

Skin parametersCSS properties
additionalBackgroundColorbackground
panelBorderColorborder-color

Table 6.68. Skin parameters redefinition for a wrapper <td> element for an input field

Skin parametersCSS properties
controlBackgroundColorbackground-color
panelBorderColorborder-color
subBorderColorborder-bottom-color
subBorderColorborder-right-color

Table 6.69. Skin parameters redefinition for an input field

Skin parametersCSS properties
buttonSizeFontfont-size
buttonFamilyFontfont-family

Table 6.70. Skin parameters redefinition for a wrapper <td> element for spinner buttons

Skin parametersCSS properties
headerBackgroundColorbackground-color
headerBackgroundColorborder-color

6.24.9. Definition of Custom Style Classes

On the screenshot there are classes names that define styles for component elements.

Style classes

Figure 6.7. Style classes


Style classes

Figure 6.8. Style classes


Style classes

Figure 6.9. Style classes


Style classes

Figure 6.10. Style classes


Table 6.71. Classes names that define an input field and a button appearance

Class nameDescription
rich-calendar-input Defines styles for an input field
rich-calendar-buttonDefines styles for a popup button

Table 6.72. Classes names that define a days appearance

Class nameDescription
rich-calendar-daysDefines styles for names of working days in a header
rich-calendar-weekendsDefines styles for names of weekend in a header
rich-calendar-weekDefines styles for weeks numbers
rich-calendar-todayDefines styles for cell with a current date
rich-calendar-cellDefines styles for cells with days
rich-calendar-hollyDefines styles for holiday
rich-calendar-selectDefines styles for a selected day
rich-calendar-hoverDefines styles for a hovered day

Table 6.73. Classes names that define a popup element

Class nameDescription
rich-calendar-popupDefines styles for a popup element
rich-calendar-exteriorDefines styles for a popup element exterior
rich-calendar-toolDefines styles for toolbars
rich-calendar-monthDefines styles for names of months
rich-calendar-header-optionalDefines styles for an optional header
rich-calendar-footer-optionalDefines styles for an optional footer
rich-calendar-headerDefines styles for a header
rich-calendar-footerDefines styles for a footer
rich-calendar-boundary-datesDefines styles for an active boundary button
rich-calendar-btnDefines styles for an inactive boundary date
rich-calendar-toolfooterDefines styles for a today control date

Table 6.74. Classes names that define a popup element during quick month and year selection

Class nameDescription
rich-calendar-date-layoutDefines styles for a popup element during quick year selection
rich-calendar-editor-layout-shadowDefines styles for a shadow
rich-calendar-editor-btnDefines styles for an inactive boundary date
rich-calendar-date-layout-splitDefines styles for a wrapper <td> element for month items near split line
rich-calendar-editor-btn-selectedDefines styles for an selected boundary date
rich-calendar-editor-btn-overDefines styles for a boundary date when pointer was moved onto
rich-calendar-editor-tool-overDefines styles for a hovered toolbar items
rich-calendar-editor-tool-pressDefines styles for a pressed toolbar items
rich-calendar-date-layout-okDefines styles for a "ok" button
rich-calendar-date-layout-cancelDefines styles for a "cancel" button

Table 6.75. Classes names that define a popup element during time selection

Class nameDescription
rich-calendar-time-layoutDefines styles for a popup element during time selection
rich-calendar-editor-layout-shadowDefines styles for a shadow
rich-calendar-time-layout-fieldsDefines styles for a wrapper <td> element for input fields and buttons
rich-calendar-spinner-input-containerDefines styles for a wrapper <td> element for an input field
rich-calendar-spinner-inputDefines styles for an input field
rich-calendar-spinner-buttonsDefines styles for a wrapper <td> element for spinner buttons
rich-calendar-spinner-upDefines styles for a "up" button
rich-calendar-spinner-downDefines styles for a "down" button
rich-calendar-time-layout-okDefines styles for a "ok" button
rich-calendar-time-layout-cancelDefines styles for a "cancel" button

In order to redefine styles for all <rich:calendar> components on a page using CSS, it's enough to create classes with the same names (possible classes could be found in the tables above) and define necessary properties in them.

Example:


...
.rich-calendar-today {                                  
    
background-color: #FF0000;                         
}  
...

This is a result:

Redefinition styles with predefined classes

Figure 6.11. Redefinition styles with predefined classes


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:

Redefinition styles with own classes and styleClass attributes

Figure 6.12. Redefinition styles with own classes and styleClass attributes


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

6.24.10. Relevant Resources Links

Here you can see the example of <rich:calendar> usage and sources for the given example.

How to use JavaScript API see on the RichFaces Users Forum.