Javatpoint Logo
Javatpoint Logo

RichFaces <rich:calendar>

It is used to enter a date and time through a pop-up calendar. The pop-up calendar can navigate through months and years. We can also customize its look and feel.

The <rich:calendar> component requires only one value attribute which holds the current selected date.

Style classes and skin parameters

The following table contains the Style classes (selectors) and corresponding skin parameters for the calendar component.

Class Function Skin Parameters Mapped CSS properties
.rf-cal-extr It is used to define the styles for a pop-up calendar exterior. panelBorderColor border-color
.rf-cal-btn It is used to define styles for a calendar button. No skin parameters.
.rf-cal-hdr It is used to define the styles for a calendar header. panelBorderColor additionalBackgroundColor border-bottom-color background-color
.rf-cal-hdr-optnl It is used to define the styles for an optional header. additionalBackgroundColor generalSizeFont background-color font-size
.rf-cal-hdr-month It is used to define the styles for the month header. headerSizeFont headerFamilyFont font-size font-family
.rf-cal-ftr It is used to define the styles for a calendar footer. additionalBackgroundColor generalSizeFont background font-size
.rf-cal-ftr-optnl It is used to define the styles for an optional footer. additionalBackgroundColor generalSizeFont background font-size
.rf-cal-tl It is used to define the styles for calendar toolbars. headerSizeFont headerFamilyFont font-size font-family
.rf-cal-tl-ftr It is used to define the styles for a toolbar item in the calendar footer. generalSizeFont generalFamilyFont font-size font-family
.rf-cal-tl-btn It is used to define styles for a toolbar button. No skin parameters.
.rf-cal-tl-btn-dis It is used to define styles for a disabled toolbar button. No skin parameters.
.rf-cal-tl-btn-hov It is used to define the styles for toolbar items when it is hovered over with the mouse cursor. calendarWeekBackgroundColor generalTextColor background-color color
.rf-cal-tl-btn-press It is used to define the styles for toolbar items when it is pressed. panelBorderColor border-right-color, border-bottom-color
.rf-cal-tl-close It is used to define styles for a Close button in a toolbar. No skin parameters.
.rf-cal-c It is used to define the styles for regular calendar cells. tableBackgroundColor generalSizeFont background-color font-size
.rf-cal-c-cnt It is used to define styles for the content of a cell. No skin parameters.

Example

Here, in the following example, we are implementing <rich:calendar> component. This example contains the following files.

JSF File

// calendar.xhtml

Managed Bean

// Calendar.java

Output:

RichFaces Rich calender 1

Now, click on the calendar icon and select date from the pop up.

RichFaces Rich calender 2

After selecting date.

RichFaces Rich calender 3




Help Others, Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA