<section role="NotInToc" id="rich_calendar">
   <title>
				&lt;
				rich:calendar
				&gt;
				<emphasis role="since">
         <superscript> available since <emphasis role="version">3.1.0</emphasis>
         </superscript>
      </emphasis>
   </title>
   <section>
        <title>Description</title>
        <para>
              The <emphasis role="bold">
            <property>&lt;rich:calendar&gt;</property>
         </emphasis> component is used to create inputs for date and time and enter them inline or using pup-up calendar that allows to navigate through months and years.
        </para>
        <figure>
            <title>
            <emphasis role="bold"> 
               <property>&lt;rich:calendar&gt;</property>
            </emphasis> component</title>
                <mediaobject>
            <imageobject>
                <imagedata fileref="images/calendar_init.png"/>
            </imageobject>
        </mediaobject>
        </figure>
    </section>
   <section>
        <title>Key Features</title>
        <itemizedlist>
            <listitem>
            <para>Highly customizable look and feel</para>
         </listitem>
            <listitem>
            <para>Popup representation</para>
         </listitem>
            <listitem>
            <para>Disablement support</para>
         </listitem>
            <listitem>
            <para>Smart and user-defined positioning</para>
         </listitem>
            <listitem>
            <para>Cells customization</para>
         </listitem>
            <listitem>
            <para>Macro substitution based on tool bars customization</para>
         </listitem>            
        </itemizedlist>
    </section>
   <section>
                <title>Details of Usage</title>
                
                <para>
                      The <emphasis role="bold">
            <property>&lt;rich:calendar&gt;</property>
         </emphasis> component can work properly in two ways of data loading
                      defined by the <emphasis>
            <property>"mode"</property>
         </emphasis> attribute. 
                      The attribute has two possible values:
                </para>
                <itemizedlist>
                      <listitem>
                            <para>
                                  <code>client</code> — the default mode. 
                                  In this mode calendar loads an initial portion of data within a definite date range. 
                                  The range is specified with the help of <emphasis>
                  <property>"preloadDateRangeBegin"</property>
               </emphasis> and <emphasis>
                  <property>"preloadDateRangeEnd"</property>
               </emphasis> attributes 
                                  that are designed for this mode only! 
                                  Additional data requests are not sent.
                            </para>
                      </listitem>
                </itemizedlist>
                <itemizedlist>
                      <listitem>
                            <para>
                                  <code>ajax</code> — in this mode the <emphasis role="bold">
                  <property>&lt;rich:calendar&gt;</property>
               </emphasis> requests portions of data for element rendering from special Data Model.
                                      The default calendar Data Model could be redefined with the help of <emphasis>
                  <property>dataModel</property>
               </emphasis> attribute that points to the object that implements <code>
                  <ulink url="&apidoc_framework;org/richfaces/model/CalendarDataModel.html">CalendarDataModel</ulink>
               </code> interface. 
                                  If <emphasis>
                  <property>"dataModel"</property>
               </emphasis> attribute has <emphasis>
                  <property>"null"</property>
               </emphasis> value, data requests are not sent. 
                                  In this case the "<code>ajax</code>" mode is equal to the "<code>client</code>". 
                            </para>
                      </listitem>
                </itemizedlist>

                <para>
                      The <emphasis role="bold">
            <property>&lt;rich:calendar&gt;</property>
         </emphasis> could be represented on a page in two ways (a) the calendar itself without input field and button and 
                      (b) date input with button and popping-up calendar. 
                      This is defined with <emphasis>
            <property>"popup" </property>
         </emphasis> attribute, which is <emphasis>
            <property>"true"</property>
         </emphasis> by default. 
                      For popup rendering a "lazy" loading is implemented: a client side script method builds the popup after request is completed. 
                      Such improvement speeds up page loading time.
                </para>
                      
                <figure>
                      <title>The <emphasis role="bold">
               <property>&lt;rich:calendar&gt;</property>
            </emphasis> with <emphasis>
               <property>popup="false"</property>
            </emphasis> (a) and default representation (b)</title>
                      <mediaobject>
                            <imageobject>
                                  <imagedata fileref="images/calendar7.png"/>
                            </imageobject>
                      </mediaobject>
                </figure>
                
                <para>
                      By default the <emphasis role="bold">
            <property>&lt;rich:calendar&gt;</property>
         </emphasis> 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 <emphasis>
            <property>"buttonIcon"</property>
         </emphasis> 
                      and <emphasis>
            <property>"buttonIconDisabled"</property>
         </emphasis> 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 <emphasis>
            <property>"buttonLabel"</property>
         </emphasis> attribute. 
                      In this case <emphasis>
            <property>"buttonIcon"</property>
         </emphasis> and <emphasis>
            <property>"buttonIconDisabled"</property>
         </emphasis> attributes are ignored.
                </para>
                
                <figure>
                      <title>The <emphasis role="bold">
               <property>&lt;rich:calendar&gt;</property>
            </emphasis> with <emphasis>
               <property>buttonLabel="Open calendar"</property>
            </emphasis> attribute</title>
                      <mediaobject>
                            <imageobject>
                                  <imagedata fileref="images/calendar8.png"/>
                            </imageobject>
                      </mediaobject>
                </figure>
                
                
                 <para>
                       There are two attributes that specify the place where the popup calendar is rendered relative to the input field and icon: 
                       <emphasis>
            <property>"jointPoint"</property>
         </emphasis> and <emphasis>
            <property>"direction"</property>
         </emphasis> 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 <emphasis role="bold">
            <property>&lt;rich:calendar&gt;</property>
         </emphasis> 
         <emphasis>
            <property>jointPoint="bottom-left"</property>
         </emphasis> 
                       and <emphasis>
            <property>direction="bottom-right".</property>
         </emphasis> 
                       There are four possible joint-points and four possible directions for each joint-point. 
                       Besides that, the values of <emphasis>
            <property>"jointPoint"</property>
         </emphasis> and <emphasis>
            <property>"direction"</property>
         </emphasis> could be set to 
                       <emphasis>
            <property>"auto"</property>
         </emphasis> that activates smart pop-up positioning.
                  </para>                                                                                                                                                                                                                                                                            
      <figure>
                      <title>Four possible positions of joint-points (red) and four possible directions (black) shown for bottom-left joint-point.</title>
                      <mediaobject>
                            <imageobject>
                                  <imagedata fileref="images/calendar9.png"/>
                            </imageobject>
                      </mediaobject>
                </figure>
                
                
                
                <para>Usage <emphasis>
                                        <property>"currentDate"</property>
                    </emphasis> attribute isn't available in the popup mode.</para>
                    <para>With help of the <emphasis>
                              <property>"currentDate"</property>
                    </emphasis> attribute you can define month and year which will be
                              displayed currently.</para>
                    <para>The <emphasis>
                                        <property>"value"</property>
                              </emphasis> attribute stores selected date currently.</para>
                  
                    <para>The difference between the value and currentDate attributes  </para>
                    <para> The <emphasis>
                                        <property>"todayControlMode"</property>
                              </emphasis> attribute defines the mode for "today"
                              control. Possible values are: </para>
                    <itemizedlist>
                              <listitem>
                                        <para>"hidden" - in this mode
                                                  "Today" button will not be
                                                  displayed</para>
                              </listitem>
                              <listitem>
                                        <para>"select" - (default) in this state
                                                  "Today" button activation will
                                                  scroll the calendar to the current date and it
                                                  become selected date</para>
                              </listitem>
                              <listitem>
                                        <para>"scroll" - in this mode
                                                  "Today" activation will simply
                                                  scroll the calendar to current month without
                                                  changing selected day.</para>
                              </listitem>
                    </itemizedlist>
                    
                    
                    
                    <para>
                              With the help of the
	<emphasis>
	          <property>"readonly"</property>
	        </emphasis>
                              attribute you can make date, time and input field unavailable, but you can look through the next/previous month or the next/previous year.
                    </para>
                    <para>
                              In order to disable the component, use the <emphasis>
	           <property>"disabled"</property>
                              </emphasis> attribute. With its help both controls are disabled in the 
                              <emphasis>
                                        <property>"popup"</property>
                              </emphasis>
                                                  mode.
                    </para>
                    <figure>
                              <title>Using the <emphasis>
                                        <property>"disabled"</property>
                              </emphasis> attribute.</title>
                              
                              <mediaobject>
                                        <imageobject>
                                                  <imagedata fileref="images/calendar6.png"/>
                                        </imageobject>
                              </mediaobject>
                    </figure>
                    
                    <para>
                              The <emphasis><property>"onchanged"</property>
                              </emphasis> attribute is used to define an event that is triggered
                              from date selection, as shown in the example below:</para>
   	<programlisting role="XML"><![CDATA[...
<rich:calendar id="date" value="#{bean.dateTest}">
          <a4j:support event="onchanged" reRender="mainTable"/>
</rich:calendar>
...]]></programlisting>
                    <para>
                              The <emphasis><property>"ondateselect"</property>
                              </emphasis> attribute is used to define an event that is triggered
                              before date selection. It could be used for possibility of date selection canceling.
                              See an example below:</para>
   	<programlisting role="XML"><![CDATA[...
<rich:calendar id="date" value="#{bean.dateTest}" ondateselect="if (!confirm('Are you sure to change date?')){return false;}"/>
...]]></programlisting>
                    <para>
                              The <emphasis><property>"ondateselected"</property>
                              </emphasis> attribute is used to define an event that is triggered
                              after date selection. </para>
                    <para>
                              <emphasis>
                                        <property>"oncurrentdateselected"</property>
                              </emphasis> event is fired when the "next/previous month" or
                              "next/previous year" button is pressed, and the value is applied. </para>
                    <para>
                              <emphasis>
                                        <property>"oncurrentdateselect"</property>
                              </emphasis> 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: </para>
                    <para>
                              <emphasis role="bold">Example:</emphasis>
                    </para>
   	<programlisting role="XML"><![CDATA[...
<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());"/>
...]]></programlisting>
                    <para>How to use these attributes see also on the <ulink url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&amp;p=4092275#4092275">RichFaces Users Forum</ulink>.</para>
                    <para> Information about the <emphasis>
                                        <property>"process"</property>
                              </emphasis> attribute usage you can find <link linkend="process">in the corresponding section </link>. </para>
                    
                

                    
                
                
                
                <para> The <emphasis>
                                        <property>"label"</property>
                              </emphasis> attribute is a generic attribute. The <emphasis>
                                        <property>"label"</property>
                              </emphasis> 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
                                        <code>"DoubleRangeValidator.MAXIMUM"</code>,
                              {2} for <code>"ShortConverter.SHORT"</code>. </para>
                    <para>The <emphasis>
                                        <property>"defaultTime"</property>
                              </emphasis> attribute to set the default time value for the current
                              date in two cases:</para>
                    <itemizedlist>
                              <listitem>
                                        <para> If time is not set </para>
                              </listitem>
                              <listitem>
                                        <para> If another date is selected and the value of the <emphasis>
                                                  <property>"resetTimeOnDateSelect"</property>
                                                  </emphasis> attribute is set to
                                                  "true" </para>
                              </listitem>
                    </itemizedlist>
                    <para> The <emphasis>
                                        <property> "enableManualInput" </property>
                              </emphasis> attribute enables/disables input field, so when <code>
                                        enableManualInput = "false" </code>, user
                              can only pick the date manually and has no possibility to type in the
                              date (default value is "false"). </para>
                    <para>The <emphasis role="bold">
                                        <property>&lt;rich:calendar&gt;</property>
                              </emphasis> component allows to use <emphasis>
                                        <property>"header"</property>
                              </emphasis>, <emphasis>
                                        <property>"footer"</property>
                              </emphasis>, <emphasis>
                                        <property>"optionalHeader"</property>
                              </emphasis>, <emphasis>
                                        <property>"optionalFooter"</property>
                              </emphasis> facets. The following elements are available in these
                              facets: <code>{currentMonthControl}</code>,
                              <code>{nextMonthControl}</code>, <code>{nextYearControl}</code>,
                                        <code>{previousYearControl}</code>,
                                        <code>{previousMonthControl}</code>,
                              <code>{todayControl}</code>, <code>{selectedDateControl}</code>. These
                              elements could be used for labels output.</para>
                    <para>Also you can use <emphasis>
                                        <property>"weekNumber"</property>
                              </emphasis> facet with available <code>{weekNumber}</code>,
                                        <code>{elementId}</code> elements and <emphasis>
                                        <property>"weekDay"</property>
                              </emphasis> facet with <code>{weekDayLabel}</code>,
                                        <code>{weekDayLabelShort}</code>,
                              <code>{weekDayNumber}</code>, <code>{isWeekend}</code>,
                                        <code>{elementId}</code> elements.
                              <code>{weekNumber}</code>, <code>{weekDayLabel}</code>,
                                        <code>{weekDayLabelShort}</code>,
                              <code>{weekDayNumber}</code> elements could be used for labels output,
                                        <code>{isWeekend}</code>, <code>{elementId}</code> - for
                              additional processing in JavaScript code.</para>
                    <para>These elements are shown on the picture below.</para>

                    <figure>
                              <title>Available elements</title>

                              <mediaobject>
                                        <imageobject>
                                                  <imagedata fileref="images/calendar3.png"/>
                                        </imageobject>
                              </mediaobject>
                    </figure>

                    <para>Simple example of usage is placed below.</para>
                    <para>
                              <emphasis role="bold">Example:</emphasis>
                    </para>
   	<programlisting role="CSS"><![CDATA[...
<!-- Styles for cells -->
<style>
    .width100{
        width:100%;
    }
    .talign{
        text-align:center;
    }
</style>
...]]></programlisting>

   	<programlisting role="XML"><![CDATA[...
<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>
...]]></programlisting>

                    <para>This is a result:</para>
                    <figure>
                              <title>Facets usage</title>

                              <mediaobject>
                                        <imageobject>
                                                  <imagedata fileref="images/calendar2.png"/>
                                        </imageobject>
                              </mediaobject>
                    </figure>

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

                    <para> 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. </para>
                    <figure>
                              <title>Quick month and year selection</title>
                              <mediaobject>
                                        <imageobject>
                                                  <imagedata fileref="images/calendar5.png"/>
                                        </imageobject>
                              </mediaobject>
                    </figure>
                    <para>Also the <emphasis role="bold">
                                        <property>&lt;rich:calendar&gt;</property>
                              </emphasis> component allows to show and manage time. It's
                              necessary to define time in a pattern (for example, it could be
                              defined as "<code>d/M/yy HH:mm</code>"). 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".</para>

                    <figure>
                              <title>Timing</title>

                              <mediaobject>
                                        <imageobject>
                                                  <imagedata fileref="images/calendar4.png"/>
                                        </imageobject>
                              </mediaobject>
                    </figure>


                    <para>It's possible to handle events for calendar from JavaScript code.
                              A simplest example of usage JavaScript API is placed below:</para>
                    <para>
                              <emphasis role="bold">Example:</emphasis>
                    </para>
                    <programlisting role="XML"><![CDATA[...
<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"/>
...]]></programlisting>

                    <para>Also the discussion about this problem can be found on the <ulink url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&amp;p=4078301#4078301">RichFaces Users Forum</ulink>.</para>
                    
                
                
      <!--             <para>The <emphasis role="bold">
                                        <property>&lt;rich:calendar&gt;</property>
                              </emphasis> component provides the possibility to use a special Data
                              Model to define data for element rendering. Data Model includes two
                              major interfaces: </para>
                    <itemizedlist>
                              <listitem>
                                        <para>
                                                  <ulink url="http://www.jboss.org/file-access/default/members/jbossrichfaces/freezone/docs/apidoc_framework/org/richfaces/model/CalendarDataModel.html"><code>CalendarDataModel</code></ulink>                                          
                                                  
                                        </para>
                              </listitem>
                              <listitem>
                                        <para>   <ulink url="http://www.jboss.org/file-access/default/members/jbossrichfaces/freezone/docs/apidoc_framework/org/richfaces/model/CalendarDataModelItem.html"><code>CalendarDataModelItem</code></ulink>   
                                                  
                                        </para>
                              </listitem>
                    </itemizedlist>
                    
                
                <para><code>CalendarDataModel</code> provides the following function:</para>
                    <itemizedlist>
                              <listitem>
                                        <para><code>CalendarDataModelItem[]
                                        getData(Date[])</code>;</para>
                              </listitem>
                    </itemizedlist>
                    <para>This method is called when it&apos;s necessary to represent the next
                              block of <code>CalendarDataModelItem</code>. It happens during navigation
                              to the next (previous) month or in any other case when calendar
                              renders. This method is called in <emphasis>
                                        <property>&quot;Ajax&quot;</property>
                              </emphasis> mode when the calendar renders a new page. </para>
                    <para><code>CalendarDataModelItem</code> provides the following function:</para>
                    <itemizedlist>
                              <listitem>
                                        <para>Date <code>getDate()</code> - returns date from the
                                                  item. Default implementation returns date.</para>
                              </listitem>
                              <listitem>
                                        <para>Boolean <code>isEnabled()</code> - returns
                                                  &quot;true&quot; if date is <emphasis>
                                                  <property>&quot;selectable&quot;</property>
                                                  </emphasis> on the calendar. Default
                                                  implementation returns
                                        &quot;true&quot;.</para>
                              </listitem>
                              <listitem>
                                        <para>String <code>getStyleClass()</code> - returns string
                                                  appended to the style class for the date span. For
                                                  example it could be &quot;relevant
                                                  holyday&quot;. It means that the class could
                                                  be defined like the
                                                  &quot;rich-cal-day-relevant-holyday&quot;
                                                  one. Default implementation returns empty
                                        string.</para>
                              </listitem>
                              <listitem>
                                        <para>Object <code>getData()</code> - 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).</para>
                              </listitem>
                    </itemizedlist> 

-->


                    <para> The <emphasis role="bold">
                                        <property>&lt;rich:calendar&gt;</property>
                              </emphasis> component provides the possibility to use
                              internationalization method to redefine and localize the labels. You
                              could use application resource bundle and define
                                        <code>RICH_CALENDAR_APPLY_LABEL</code>,
                                        <code>RICH_CALENDAR_TODAY_LABEL</code>,
                                        <code>RICH_CALENDAR_CLOSE_LABEL</code>,
                                        <code>RICH_CALENDAR_OK_LABEL</code>,
                                        <code>RICH_CALENDAR_CLEAN_LABEL</code>,
                                        <code>RICH_CALENDAR_CANCEL_LABEL </code> there. </para>
                    <para>You could also pack <code>org.richfaces.renderkit.calendar</code>
                              <ulink url="&apidoc;org/richfaces/renderkit/CalendarRendererBase.html#CALENDAR_BUNDLE">resource</ulink> bundle with your JARs defining the same
                              properties. </para>
                    <note>
                              <title>Note:</title>
                              <para>Only for Internet Explorer 6 and later. To make <emphasis role="bold">
                                                  <property>&lt;rich:calendar&gt;</property>
                                        </emphasis> inside <emphasis role="bold">
                                                  <property>&lt;rich:modalPanel&gt;</property>
                                        </emphasis> rendered properly, enable the
                                        standards-compliant mode. Explore <ulink url="http://msdn.microsoft.com/en-us/library/ms535242(VS.85).aspx">!DOCTYPE reference at MSDN</ulink> to find out
                                        how to do this. </para>
                    </note>

          </section>
   <section>
      <title>Reference Data</title>
      <para>
         <ulink url="&tlddoc;rich/calendar.html">Table of 
							&lt;rich:calendar&gt; 
							 attributes</ulink>.
						</para>
      <table>
                    <title>Component Identification Parameters</title>

                    <tgroup cols="2">
                              <thead>
                                        <row>
                                                  <entry>Name</entry>

                                                  <entry>Value</entry>
                                        </row>
                              </thead>

                              <tbody>
                                        <row>
                                                  <entry>component-type</entry>

                                                  <entry>org.richfaces.Calendar</entry>
                                        </row>

                                        <row>
                                                  <entry>component-class</entry>

                                                  <entry>org.richfaces.component.html.HtmlCalendar</entry>
                                        </row>

                                        <row>
                                                  <entry>component-family</entry>

                                                  <entry>org.richfaces.Calendar</entry>
                                        </row>

                                        <row>
                                                  <entry>renderer-type</entry>

                                                  <entry>org.richfaces.CalendarRenderer</entry>
                                        </row>

                                        <row>
                                                  <entry>tag-class</entry>

                                                  <entry>org.richfaces.taglib.CalendarTag</entry>
                                        </row>
                              </tbody>
                    </tgroup>
          </table>
      <table>
                              <title>JavaScript API</title>

                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                  <entry>Function</entry>

                                                  <entry>Description</entry>
                                                  </row>
                                        </thead>

                                        <tbody>

                                                  <row>
                                                  <entry>selectDate(date)</entry>

                                                  <entry>Selects the date specified. If
                                                  the date isn't in
                                                  current month - performs
                                                  request to select</entry>
                                                  </row>

                                                  <row>
                                                  <entry role="tbi">isDateEnabled(date)</entry>

                                                  <entry role="tbi">Checks if given date
                                                  is selectable (to be
                                                  implemented)</entry>
                                                  </row>

                                                  <row>
                                                  <entry role="tbi">enableDate(date)</entry>

                                                  <entry role="tbi">Enables date cell
                                                  control on the calendar (to be
                                                  implemented)</entry>
                                                  </row>

                                                  <row>
                                                  <entry role="tbi">disableDate(date)</entry>

                                                  <entry role="tbi">Disables date cell
                                                  control on the calendar (to be
                                                  implemented)</entry>
                                                  </row>

                                                  <row>
                                                  <entry role="tbi">enableDates(date[])</entry>

                                                  <entry role="tbi">Enables dates cell
                                                  controls set on the calendar
                                                  (to be implemented)</entry>
                                                  </row>

                                                  <row>
                                                  <entry role="tbi">disableDates(date[])</entry>

                                                  <entry role="tbi">Disables dates cell
                                                  controls set on the calendar
                                                  (to be implemented)</entry>
                                                  </row>

                                                  <row>
                                                  <entry>nextMonth()</entry>

                                                  <entry>Navigates to next month</entry>
                                                  </row>

                                                  <row>
                                                  <entry>nextYear()</entry>

                                                  <entry>Navigates to next year</entry>
                                                  </row>

                                                  <row>
                                                  <entry>prevMonth()</entry>

                                                  <entry>Navigates to previous month
                                                  </entry>
                                                  </row>

                                                  <row>
                                                  <entry>prevYear()</entry>

                                                  <entry>Navigates to previous
                                                  year</entry>
                                                  </row>

                                                  <row>
                                                  <entry>today()</entry>

                                                  <entry>Selects today date</entry>
                                                  </row>

                                                  <row>
                                                  <entry>getSelectedDate()</entry>

                                                  <entry>Returns currently selected
                                                  date</entry>
                                                  </row>

                                                  <row>
                                                  <entry>Object getData()</entry>

                                                  <entry>Returns additional data for the
                                                  date</entry>
                                                  </row>

                                                  <!--
          <row>
          <entry>enable()</entry>

          <entry>Enables calendar</entry>
          </row>

          <row>
          <entry>disable()</entry>

          <entry>Disables calendar</entry>
          </row>
        -->

                                                  <row>
                                                  <entry>getCurrentMonth()</entry>

                                                  <entry>Returns number of the month
                                                  currently being viewed</entry>
                                                  </row>

                                                  <row>
                                                  <entry>getCurrentYear()</entry>

                                                  <entry>Returns number of the year
                                                  currently being viewed</entry>
                                                  </row>

                                                  <row>
                                                  <entry>doCollapse()</entry>

                                                  <entry>Collapses calendar
                                                  element</entry>
                                                  </row>

                                                  <row>
                                                  <entry>doExpand()</entry>

                                                  <entry>Expands calendar element</entry>
                                                  </row>

                                                  <row>
                                                  <entry>resetSelectedDate()</entry>

                                                  <entry>Clears a selected day
                                                  value</entry>
                                                  </row>

                                                  <row>
                                                  <entry>doSwitch()</entry>

                                                  <entry>Inverts a state for the popup
                                                  calendar</entry>
                                                  </row>

                                        </tbody>
                              </tgroup>
                    </table>
      <table>
                              <title>Facets</title>
                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                            <entry>Facet</entry>
                                                            <entry>Description</entry>
                                                  </row>
                                        </thead>
                                        <tbody>
                                                  <row>
                                                            <entry>header</entry>
                                                            <entry>Redefines calendar header. Related attribute is "showHeader"</entry>
                                                  </row>
                                                  <row>
                                                            <entry>footer</entry>
                                                            <entry>Redefines calendar footer. Related attribute is "showFooter"</entry>
                                                  </row>
                                                  <row>
                                                            <entry>optionalHeader</entry>
                                                            <entry>Defines calendar's optional header</entry>
                                                  </row>
                                                  <row>
                                                            <entry>optionalFooter</entry>
                                                            <entry>Defines calendar's optional footer</entry>
                                                  </row>
                                                  <row>
                                                            <entry>weekNumber</entry>
                                                            <entry>Redefines week number</entry>
                                                  </row>
                                                  <row>
                                                            <entry>weekDay</entry>
                                                            <entry>Redefines names of the week days. Related attributes are "weekDayLabels" and "weekDayLabelsShort"</entry>
                                                  </row>
                                        </tbody>
                              </tgroup>
      </table>
  
   	<table>
   		<title>Style classes (selectors) with the corresponding skin parameters</title>
   		<tgroup cols="4">
   			<thead>
   				<row>
   					<entry>Class (selector) name</entry>
   					<entry>Description</entry>
   					<entry>Skin Parameter</entry>
   					<entry>CSS properties mapped</entry>
   				</row>
   			</thead>
   			<tbody>         
   				<row>
   					<entry>.rich-calendar-exterior</entry>
   					<entry>Defines styles for a popup element exterior</entry>
   					<entry>panelBorderColor</entry>
   					<entry>border-color</entry>
   				</row>
   				
   				<row>
   					<entry morerows="3">.rich-calendar-header-optional</entry>
   					<entry morerows="3">Defines styles for a header</entry>
   					<entry>panelBorderColor</entry>
   					<entry>border-bottom-color</entry>
   				</row>
   				<row>
   					<entry>additionalBackgroundColor</entry>
   					<entry>background-color</entry>
   				</row>
   				<row>
   					<entry>generalSizeFont</entry>
   					<entry>font-size</entry>
   				</row>
   				<row>
   					<entry>generalFamilyFont</entry>
   					<entry>font-family</entry>
   				</row>
   				
   				<row>
   					<entry morerows="3">.rich-calendar-header</entry>
   					<entry morerows="3">Defines styles for an optional header</entry>
   					<entry>panelBorderColor</entry>
   					<entry>border-bottom-color</entry>
   				</row>
   				<row>
   					<entry>additionalBackgroundColor</entry>
   					<entry>background-color</entry>
   				</row>
   				<row>
   					<entry>generalSizeFont</entry>
   					<entry>font-size</entry>
   				</row>
   				<row>
   					<entry>generalFamilyFont</entry>
   					<entry>font-family</entry>
   				</row>
   				
   				<row>
   					<entry morerows="3">.rich-calendar-cell</entry>
   					<entry morerows="3">Defines styles for cells with days</entry>
   					<entry>panelBorderColor</entry>
   					<entry>border-bottom-color, border-right-color</entry>
   				</row>
   				<row>
   					<entry>tableBackgroundColor</entry>
   					<entry>background-color</entry>
   				</row>
   				<row>
   					<entry>generalSizeFont</entry>
   					<entry>font-size</entry>
   				</row>
   				<row>
   					<entry>generalFamilyFont</entry>
   					<entry>font-family</entry>
   				</row>
   				
   				<row>
   					<entry morerows="4">.rich-calendar-tool</entry>
   					<entry morerows="4">Defines styles for toolbars</entry>
   					<entry>headerBackgroundColor</entry>
   					<entry>background-color</entry>
   				</row>
   				<row>
   					<entry>headerSizeFont</entry>
   					<entry>font-size</entry>
   				</row>
   				<row>
   					<entry>headerFamilyFont</entry>
   					<entry>font-family</entry>
   				</row>
   				<row>
   					<entry>headerWeightFont</entry>
   					<entry>font-weight</entry>
   				</row>
   				<row>
   					<entry>headerTextColor</entry>
   					<entry>color</entry>
   				</row>
   				
   				<row>
   					<entry morerows="4">.rich-calendar-month</entry>
   					<entry morerows="4">Defines styles for names of months</entry>
   					<entry>headerBackgroundColor</entry>
   					<entry>background-color</entry>
   				</row>
   				<row>
   					<entry>headerSizeFont</entry>
   					<entry>font-size</entry>
   				</row>
   				<row>
   					<entry>headerFamilyFont</entry>
   					<entry>font-family</entry>
   				</row>
   				<row>
   					<entry>headerWeightFont</entry>
   					<entry>font-weight</entry>
   				</row>
   				<row>
   					<entry>headerTextColor</entry>
   					<entry>color</entry>
   				</row>
   				
   				<row>
   					<entry morerows="3">.rich-calendar-days</entry>
   					<entry morerows="3">Defines styles for names of working days in a header</entry>
   					<entry>panelBorderColor</entry>
   					<entry>border-bottom-color, border-right-color</entry>
   				</row>
   				<row>
   					<entry>additionalBackgroundColor</entry>
   					<entry>background</entry>
   				</row>
   				<row>
   					<entry>generalSizeFont</entry>
   					<entry>font-size</entry>
   				</row>
   				<row>
   					<entry>generalFamilyFont</entry>
   					<entry>font-family</entry>
   				</row>
   				
   				<row>
   					<entry morerows="4">.rich-calendar-week</entry>
   					<entry morerows="4">Defines styles for weeks numbers</entry>
   					<entry>panelBorderColor</entry>
   					<entry>border-bottom-color, border-right-color</entry>
   				</row>
   				<row>
   					<entry>additionalBackgroundColor</entry>
   					<entry>background</entry>
   				</row>
   				<row>
   					<entry>calendarWeekBackgroundColor</entry>
   					<entry>background-color</entry>
   				</row>
   				<row>
   					<entry>generalSizeFont</entry>
   					<entry>font-size</entry>
   				</row>
   				<row>
   					<entry>generalFamilyFont</entry>
   					<entry>font-family</entry>
   				</row>
   				
   				<row>
   					<entry morerows="1">.rich-calendar-holly</entry>
   					<entry morerows="1">Defines styles for holiday</entry>
   					<entry>calendarHolidaysBackgroundColor</entry>
   					<entry>background-color</entry>
   				</row>
   				<row>
   					<entry>calendarHolidaysTextColor</entry>
   					<entry>color</entry>
   				</row>
  
   				<row>
   					<entry morerows="1">.rich-calendar-today</entry>
   					<entry morerows="1">Defines styles for cell with a current date</entry>
   					<entry>calendarCurrentBackgroundColor</entry>
   					<entry>background-color</entry>
   				</row>
   				<row>
   					<entry>calendarCurrentTextColor</entry>
   					<entry>color</entry>
   				</row>
   				
   				<row>
   					<entry morerows="1">.rich-calendar-select</entry>
   					<entry morerows="1">Defines styles for a selected day</entry>
   					<entry>headerBackgroundColor</entry>
   					<entry>background-color</entry>
   				</row>
   				<row>
   					<entry>headerTextColor</entry>
   					<entry>color</entry>
   				</row>
   				
   				<row>
   					<entry morerows="1">.rich-calendar-hover</entry>
   					<entry morerows="1">Defines styles for a hovered day</entry>
   					<entry>calendarSpecBackgroundColor</entry>
   					<entry>background-color</entry>
   				</row>
   				<row>
   					<entry>calendarSpecTextColor</entry>
   					<entry>color</entry>
   				</row>
   				
   				<row>
   					<entry morerows="2">.rich-calendar-toolfooter</entry>
   					<entry morerows="2">Defines styles for a tollbar items in the footer</entry>
   					<entry>additionalBackgroundColor</entry>
   					<entry>background</entry>
   				</row>
   				<row>
   					<entry>generalSizeFont</entry>
   					<entry>font-size</entry>
   				</row>
   				<row>
   					<entry>generalFamilyFont</entry>
   					<entry>font-family</entry>
   				</row>
   				
   				<row>
   					<entry morerows="3">.rich-calendar-tool-btn-hover</entry>
   					<entry morerows="3">Defines styles for a toolbar button hovered</entry>
   					<entry>calendarWeekBackgroundColor</entry>
   					<entry>background-color</entry>
   				</row>
   				<row>
   					<entry>generalTextColor</entry>
   					<entry>color</entry>
   				</row>
   				<row>
   					<entry>tableBackgroundColor</entry>
   					<entry>border-color</entry>
   				</row>
   				<row>
   					<entry>panelBorderColor</entry>
   					<entry>border-right-color, border-bottom-color</entry>
   				</row>
   				
   				<row>
   					<entry morerows="1">.rich-calendar-tool-btn-press</entry>
   					<entry morerows="1">Defines styles for a toolbar button pressed</entry>
   					<entry>panelBorderColor</entry>
   					<entry>border-color</entry>
   				</row>
   				<row>
   					<entry>tableBackgroundColor</entry>
   					<entry>border-right-color, border-bottom-color</entry>
   				</row>
   				
   				<row>
   					<entry morerows="3">.rich-calendar-footer</entry>
   					<entry morerows="3">Defines styles for a footer</entry>
   					<entry>panelBorderColor</entry>
   					<entry>border-right-color, border-top-color</entry>
   				</row>
   				<row>
   					<entry>additionalBackgroundColor</entry>
   					<entry>background</entry>
   				</row>
   				<row>
   					<entry>generalSizeFont</entry>
   					<entry>font-size</entry>
   				</row>
   				<row>
   					<entry>generalFamilyFont</entry>
   					<entry>font-family</entry>
   				</row>
   				
   				<row>
   					<entry morerows="3">.rich-calendar-footer-optional</entry>
   					<entry morerows="3">Defines styles for an optional footer</entry>
   					<entry>panelBorderColor</entry>
   					<entry>border-right-color, border-top-color</entry>
   				</row>
   				<row>
   					<entry>additionalBackgroundColor</entry>
   					<entry>background</entry>
   				</row>
   				<row>
   					<entry>generalSizeFont</entry>
   					<entry>font-size</entry>
   				</row>
   				<row>
   					<entry>generalFamilyFont</entry>
   					<entry>font-family</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-calendar-editor-shadow</entry>
   					<entry>Defines styles for the calendar editor shadow</entry>
   					<entry>tableBackgroundColor</entry>
   					<entry>background</entry>
   				</row>
   				
   				<row>
   					<entry morerows="3">.rich-calendar-time-layout</entry>
   					<entry morerows="3">Defines styles for a popup element during time selection</entry>
   					<entry>panelBorderColor</entry>
   					<entry>border-color</entry>
   				</row>
   				<row>
   					<entry>additionalBackgroundColor</entry>
   					<entry>background</entry>
   				</row>
   				<row>
   					<entry>generalSizeFont</entry>
   					<entry>font-size</entry>
   				</row>
   				<row>
   					<entry>generalFamilyFont</entry>
   					<entry>font-family</entry>
   				</row>
   				
   				<row>
   					<entry morerows="3">.rich-calendar-date-layout</entry>
   					<entry morerows="3">Defines styles for a popup element during quick month/year selection</entry>
   					<entry>panelBorderColor</entry>
   					<entry>border-color</entry>
   				</row>
   				<row>
   					<entry>tableBackgroundColor</entry>
   					<entry>background</entry>
   				</row>
   				<row>
   					<entry>generalSizeFont</entry>
   					<entry>font-size</entry>
   				</row>
   				<row>
   					<entry>generalFamilyFont</entry>
   					<entry>font-family</entry>
   				</row>
   				
   				<row>
   					<entry morerows="1">.rich-calendar-time-layout input</entry>
   					<entry morerows="1">Defines styles for the input fields in the popup element during time selection</entry>
   					<entry>generalSizeFont</entry>
   					<entry>font-size</entry>
   				</row>
   				<row>
   					<entry>generalFamilyFont</entry>
   					<entry>font-family</entry>
   				</row>
   				
   				<row>
   					<entry morerows="1">.rich-calendar-date-layout-cancel</entry>
   					<entry morerows="1">Defines styles for the &quot;Cancel&quot; button</entry>
   					<entry>additionalBackgroundColor</entry>
   					<entry>background</entry>
   				</row>
   				<row>
   					<entry>panelBorderColor</entry>
   					<entry>border-top-color</entry>
   				</row>
   				
   				<row>
   					<entry morerows="1">.rich-calendar-date-layout-ok</entry>
   					<entry morerows="1">Defines styles for the &quot;Ok&quot; button</entry>
   					<entry>additionalBackgroundColor</entry>
   					<entry>background</entry>
   				</row>
   				<row>
   					<entry>panelBorderColor</entry>
   					<entry>border-top-color</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-calendar-date-layout-split</entry>
   					<entry>Defines styles for a wrapper &lt;td&gt; element for month items near split line</entry>
   					<entry>panelBorderColor</entry>
   					<entry>border-right-color</entry>
   				</row>
   				
   				<row>
   					<entry morerows="1">.rich-calendar-time-btn</entry>
   					<entry morerows="1">Defines styles for a button in the popup element for time section</entry>
   					<entry>tableBackgroundColor</entry>
   					<entry>border-color</entry>
   				</row>
   				<row>
   					<entry>panelBorderColor</entry>
   					<entry>border-right-color, border-bottom-color</entry>
   				</row>
   				
   				<row>
   					<entry morerows="2">.rich-calendar-time-btn-press</entry>
   					<entry morerows="2">Defines styles for a pressed button in the popup element for time section</entry>
   					<entry>tableBackgroundColor</entry>
   					<entry>border-right-color, border-bottom-color</entry>
   				</row>
   				<row>
   					<entry>panelBorderColor</entry>
   					<entry>border-color</entry>
   				</row>
   				<row>
   					<entry>calendarWeekBackgroundColor</entry>
   					<entry>background-color</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-calendar-spinner-buttons</entry>
   					<entry>Defines styles for a wrapper &lt;td&gt; element for spinner buttons in the popup element for time selection</entry>
   					<entry>headerBackgroundColor</entry>
   					<entry>background-color, border-color</entry>
   				</row>
   				
   				<row>
   					<entry morerows="2">.rich-calendar-spinner-input-container</entry>
   					<entry morerows="2">Defines styles for a wrapper &lt;td&gt; element of a spinner input field in the popup element for time selection</entry>
   					<entry>controlBackgroundColor</entry>
   					<entry>background-color</entry>
   				</row>
   				<row>
   					<entry>panelBorderColor</entry>
   					<entry>border-color</entry>
   				</row>
   				<row>
   					<entry>subBorderColor</entry>
   					<entry>border-right-color, border-bottom-color</entry>
   				</row>
   				
   				<row>
   					<entry morerows="1">.rich-calendar-spinner-input</entry>
   					<entry morerows="1">Defines styles for a spinner input field in the popup element for time section</entry>
   					<entry>buttonSizeFont</entry>
   					<entry>font-size</entry>
   				</row>
   				<row>
   					<entry>buttonFamilyFont</entry>
   					<entry>font-family</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-calendar-editor-layout-shadow</entry>
   					<entry>Defines styles for the layout shadow of the calendar editor</entry>
   					<entry>shadowBackgroundColor</entry>
   					<entry>background-color</entry>
   				</row>
   				
   				<row>
   					<entry morerows="1">.rich-calendar-editor-btn-over</entry>
   					<entry morerows="1">Defines styles for the calendar editor button when the pointer is moved
   						onto</entry>
   					<entry>panelBorderColor</entry>
   					<entry>border-color</entry>
   				</row>
   				<row>
   					<entry>calendarSpecBackgroundColor</entry>
   					<entry>background</entry>
   				</row>
   				
   				<row>
   					<entry morerows="1">.rich-calendar-editor-btn-selected</entry>
   					<entry morerows="1">Defines styles for the calendar editor button selected</entry>
   					<entry>calendarCurrentBackgroundColor</entry>
   					<entry>background-color</entry>
   				</row>
   				<row>
   					<entry>calendarCurrentTextColor</entry>
   					<entry>color</entry>
   				</row>
   				
   				<row>
   					<entry morerows="2">.rich-calendar-editor-tool-over</entry>
   					<entry morerows="2">Defines styles for a hovered toolbar items in the calendar editor</entry>
   					<entry>additionalBackgroundColor</entry>
   					<entry>background</entry>
   				</row>
   				<row>
   					<entry>tableBackgroundColor</entry>
   					<entry>border-color</entry>
   				</row>
   				<row>
   					<entry>panelBorderColor</entry>
   					<entry>border-right-color, border-bottom-color</entry>
   				</row>
   				
   				<row>
   					<entry morerows="2">.rich-calendar-editor-tool-press</entry>
   					<entry morerows="2">Defines styles for a pressed toolbar items in the calendar editor</entry>
   					<entry>additionalBackgroundColor</entry>
   					<entry>background</entry>
   				</row>
   				<row>
   					<entry>panelBorderColor</entry>
   					<entry>border-color</entry>
   				</row>
   				<row>
   					<entry>tableBackgroundColor</entry>
   					<entry>border-right-color, border-bottom-color</entry>
   				</row>
   			</tbody>
   		</tgroup>
   	</table>
   	
   	<table>
   		<title>Style classes (selectors) without skin parameters</title>
   		<tgroup cols="2">
   			<thead>
   				<row>
   					<entry>Class name</entry>
   					<entry>Description</entry>
   				</row>
   			</thead>
   			<tbody>
   				<row>
   					<entry>.rich-calendar-input </entry>
   					<entry>Defines styles for an input field</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-calendar-button</entry>
   					<entry>Defines styles for a popup button</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-calendar-weekends</entry>	
   					<entry>Defines styles for names of weekend in a header</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-calendar-popup</entry>
   					<entry>Defines styles for a popup element</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-calendar-tool-btn</entry>			
   					<entry>Defines styles for a toolbar buttons</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-calendar-tool-btn-disabled</entry>			
   					<entry>Defines styles for a toolbar buttons disabled</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-calendar-tool-close</entry>			
   					<entry>Defines styles for a toolbar &quot;Close&quot; button</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-calendar-boundary-dates</entry>			
   					<entry>Defines styles for an active boundary button</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-calendar-btn</entry>
   					<entry>Defines styles for a date button</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-calendar-editor-btn</entry>
   					<entry>Defines styles for a button in the calendar editor</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-calendar-time-layout-fields</entry>
   					<entry>Defines styles for a wrapper &lt;td&gt; element for input fields and
   						buttons</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-calendar-spinner-up</entry>
   					<entry>Defines styles for the &quot;Up&quot; spinner button in the popup element for time section</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-calendar-spinner-down</entry>
   					<entry>Defines styles for the &quot;Down&quot; spinner button in the popup element for time section</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-calendar-spinner-pressed</entry>
   					<entry>Defines styles for a pressed spinner button in the popup element for time section</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-calendar-time-layout-ok</entry>
   					<entry>Defines styles for the &quot;Ok&quot; button in the popup element for time section</entry>
   				</row>
   				<row>
   					<entry>.rich-calendar-time-layout-cancel</entry>
   					<entry>Defines styles for the &quot;Cancel&quot; button in the popup element for time section</entry>
   				</row>
   			</tbody>
   		</tgroup>
   	</table>
   	
   	<para>You can find all necessary information about style classes redefinition in 
						<link linkend="customstyles">Definition of Custom Style Classes</link> 
							section.</para>
						</section>
   <section>
                    <title>Relevant Resources Links</title>
                    <para>
         <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/calendar.jsf?c=calendar">On the component LiveDemo page</ulink> you can see the example of <emphasis role="bold">
                                        <property>&lt;rich:calendar&gt;</property>
                              </emphasis> usage and sources for the given example. </para>
                    <para>How to use JavaScript API see on the <ulink url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&amp;p=4078301#4078301">RichFaces Users Forum</ulink>.</para>
          </section>
</section>
