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

  <?xml version=’1.0′ encoding=’UTF-8′ ?>  <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN””http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>  <ui:composition xmlns=”http://www.w3.org/1999/xhtml”  xmlns:h=”http://java.sun.com/jsf/html”  xmlns:f=”http://java.sun.com/jsf/core”  xmlns:ui=”http://java.sun.com/jsf/facelets”  xmlns:a4j=”http://richfaces.org/a4j”  xmlns:rich=”http://richfaces.org/rich”>  <f:view>  <h:head>  <title>Calendar Example</title>  </h:head>  <h:body>  <h:form>  <h1>Calendar</h1>  <rich:calendar value=”#{calendar.selectedDate}”  locale=”#{calendar.locale}”  popup=”#{calendar.popup}”  datePattern=”#{calendar.pattern}”  style=”width:200px”>  </rich:calendar>  </h:form>  </h:body>  </f:view>  </ui:composition>  

Managed Bean

// Calendar.java

  package com.tutoraspire.calendar;  import java.text.DateFormat;  import java.util.Date;  import java.util.Locale;  import javax.faces.bean.ManagedBean;  import javax.faces.bean.RequestScoped;  import javax.faces.event.ValueChangeEvent;  @ManagedBean  @RequestScoped  public class Calendar {  private static final String[] WEEK_DAY_LABELS = new String[] { “Sun *”,  “Mon +”, “Tue +”, “Wed +”, “Thu +”, “Fri +”, “Sat *” };  private Locale locale;  private boolean popup;  private boolean readonly;  private boolean showInput;  private boolean enableManualInput;      private String pattern;  private Date currentDate;  private Date selectedDate;  private String jointPoint;  private String direction;  private String boundary;  private boolean useCustomDayLabels;  public Locale getLocale() {  return locale;  }  public void setLocale(Locale locale) {  this.locale = locale;  }  public boolean isPopup() {  return popup;  }  public void setPopup(boolean popup) {  this.popup = popup;  }  public String getPattern() {  return pattern;  }  public void setPattern(String pattern) {  this.pattern = pattern;  }  public Calendar() {  locale = Locale.US;  popup = true;  pattern = “MMM d, yyyy”;  jointPoint = “bottomleft”;  direction = “bottomright”;  readonly = true;  enableManualInput=false;  showInput=true;  boundary = “inactive”;  }  public boolean isShowInput() {  return showInput;  }  public void setShowInput(boolean showInput) {  this.showInput = showInput;  }  public boolean isEnableManualInput() {  return enableManualInput;  }  public void setEnableManualInput(boolean enableManualInput) {  this.enableManualInput = enableManualInput;  }  public boolean isReadonly() {  return readonly;  }  public void setReadonly(boolean readonly) {  this.readonly = readonly;  }  public void selectLocale(ValueChangeEvent event) {  String tLocale = (String) event.getNewValue();  if (tLocale != null) {  String lang = tLocale.substring(0, 2);  String country = tLocale.substring(3);  locale = new Locale(lang, country, “”);  }  }  public boolean isUseCustomDayLabels() {  return useCustomDayLabels;  }  public void setUseCustomDayLabels(boolean useCustomDayLabels) {  this.useCustomDayLabels = useCustomDayLabels;  }  public Object getWeekDayLabelsShort() {  if (isUseCustomDayLabels()) {  return WEEK_DAY_LABELS;  } else {  return null;  }  }  public String getCurrentDateAsText() {  Date currentDate = getCurrentDate();  if (currentDate != null) {  return DateFormat.getDateInstance(DateFormat.FULL).format(  currentDate);  }  return null;  }  public Date getCurrentDate() {  return currentDate;  }  public void setCurrentDate(Date currentDate) {  this.currentDate = currentDate;  }  public Date getSelectedDate() {  return selectedDate;  }  public void setSelectedDate(Date selectedDate) {  this.selectedDate = selectedDate;  }  public String getJointPoint() {  return jointPoint;  }  public void setJointPoint(String jointPoint) {  this.jointPoint = jointPoint;  }  public void selectJointPoint(ValueChangeEvent event) {  jointPoint = (String) event.getNewValue();  }  public String getDirection() {  return direction;  }  public void setDirection(String direction) {  this.direction = direction;  }  public void selectDirection(ValueChangeEvent event) {  direction = (String) event.getNewValue();  }  public String getBoundary() {  return boundary;  }  public void setBoundary(String boundary) {  this.boundary = boundary;  }  }  

Output:

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

After selecting date.

Next TopicRichFaces <rich:editor>

RichFaces Rich:Calendar

RichFaces <rich:calendar>

Style classes and skin parameters

Example

JSF File

Managed Bean

Verbal Reasoning | Assertion and Reason 1

Components of Robot

You may also like