<?xml version="1.0" encoding="UTF-8"?>
<section>
          <sectioninfo>
                    <keywordset>
                              <keyword>rich:calendar</keyword>
                    </keywordset>
          </sectioninfo>

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

          <section>
                    <title>Creating the Component with a Page Tag</title>

                    <para>To create the simplest variant on a page use the following syntax:</para>

                    <programlisting role="XML"><![CDATA[<rich:calendar />]]></programlisting>
          </section>

          <section>
                    <title>Creating the Component Dynamically Using Java</title>
                        
                <para>
                      <emphasis role="bold">Example:</emphasis>
                </para>
                    <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlCalendar;
...
HtmlCalendar myCalendar = new HtmlCalendar();
...
]]></programlisting>
          </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>&quot;mode&quot;</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>&quot;preloadDateRangeBegin&quot;</property></emphasis> and <emphasis><property>&quot;preloadDateRangeEnd&quot;</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>&quot;dataModel&quot;</property></emphasis> attribute has <emphasis><property>&quot;null&quot;</property></emphasis> value, data requests are not sent. 
                                  In this case the &quot;<code>ajax</code>&quot; mode is equal to the &quot;<code>client</code>&quot;. 
                            </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>&quot;popup&quot; </property></emphasis> attribute, which is <emphasis><property>&quot;true&quot;</property></emphasis> by default. 
                      For popup rendering a &quot;lazy&quot; 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=&quot;false&quot;</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>&quot;buttonIcon&quot;</property></emphasis> 
                      and <emphasis><property>&quot;buttonIconDisabled&quot;</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>&quot;buttonLabel&quot;</property></emphasis> attribute. 
                      In this case <emphasis><property>&quot;buttonIcon&quot;</property></emphasis> and <emphasis><property>&quot;buttonIconDisabled&quot;</property></emphasis> attributes are ignored.
                </para>
                
                <figure>
                      <title>The <emphasis role="bold"><property>&lt;rich:calendar&gt;</property></emphasis> with <emphasis><property>buttonLabel=&quot;Open calendar&quot;</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>&quot;jointPoint&quot;</property></emphasis> and <emphasis><property>&quot;direction&quot;</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=&quot;bottom-left&quot;</property></emphasis> 
                       and <emphasis><property>direction=&quot;bottom-right&quot;.</property></emphasis> 
                       There are four possible joint-points and four possible directions for each joint-point. 
                       Besides that, the values of <emphasis><property>&quot;jointPoint&quot;</property></emphasis> and <emphasis><property>&quot;direction&quot;</property></emphasis> could be set to 
                       <emphasis><property>&quot;auto&quot;</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>&quot;currentDate&quot;</property>
                    </emphasis> attribute isn&apos;t available in the popup mode.</para>
                    <para>With help of the <emphasis>
                              <property>&quot;currentDate&quot;</property>
                    </emphasis> attribute you can define month and year which will be
                              displayed currently.</para>
                    <para>The <emphasis>
                                        <property>&quot;value&quot;</property>
                              </emphasis> attribute stores selected date currently.</para>
                  
                    <para>The difference between the value and currentDate attributes  </para>
                    <para> The <emphasis>
                                        <property>&quot;todayControlMode&quot;</property>
                              </emphasis> attribute defines the mode for &quot;today&quot;
                              control. Possible values are: </para>
                    <itemizedlist>
                              <listitem>
                                        <para>&quot;hidden&quot; - in this mode
                                                  &quot;Today&quot; button will not be
                                                  displayed</para>
                              </listitem>
                              <listitem>
                                        <para>&quot;select&quot; - (default) in this state
                                                  &quot;Today&quot; button activation will
                                                  scroll the calendar to the current date and it
                                                  become selected date</para>
                              </listitem>
                              <listitem>
                                        <para>&quot;scroll&quot; - in this mode
                                                  &quot;Today&quot; activation will simply
                                                  scroll the calendar to current month without
                                                  changing selected day.</para>
                              </listitem>
                    </itemizedlist>
                    
                    
                    
                    <para>
                              With the help of the
	<emphasis>
	          <property>&quot;readonly&quot;</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>&quot;disabled&quot;</property>
                              </emphasis> attribute. With its help both controls are disabled in the 
                              <emphasis>
                                        <property>&quot;popup&quot;</property>
                              </emphasis>
                                                  mode.
                    </para>
                    <figure>
                              <title>Using the <emphasis>
                                        <property>&quot;disabled&quot;</property>
                              </emphasis> attribute.</title>
                              
                              <mediaobject>
                                        <imageobject>
                                                  <imagedata fileref="images/calendar6.png"/>
                                        </imageobject>
                              </mediaobject>
                    </figure>
                    
                    
                    
                   
                    <para><emphasis>
                                        <property>&quot;ondateselect&quot;</property>
                              </emphasis> attribute is used to define an event that is triggered
                              before date selection.</para>
                    <para><emphasis>
                                        The <property>&quot;ondateselected&quot;</property>
                              </emphasis> attribute is used to define an event that is triggered
                              after date selection. </para>
                    <para>For example, to fire some event after date selection you should use
                                        <emphasis role="bold">
                                        <property>&lt;a4j:support&gt;</property>
                              </emphasis>. And it should be bound to <emphasis>
                                        <property>&quot;ondateselected&quot;</property>
                              </emphasis> event as it&apos;s shown in the example below:</para>
                    <programlisting role="XML"><![CDATA[...
<rich:calendar id="date" value="#{bean.dateTest}">
          <a4j:support event="ondateselected" reRender="mainTable"/>
</rich:calendar>
...]]></programlisting>
                    <note>
                              <title>Note:</title>
                              <para>
                                        When a timePicker was fulfilled, the <emphasis><property>&quot;ondateselected&quot;</property></emphasis> attribute does not allow you to submit a selected date. It happens because this event rose when the date is selected but the input hasn't been updated with new value yet.
                                        
                              </para>
                    </note>
                    <para><emphasis>
                                        <property>&quot;ondateselect&quot;</property>
                              </emphasis> 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>
                              <emphasis>
                                        <property>&quot;oncurrentdateselected&quot;</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>&quot;oncurrentdateselect&quot;</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>&quot;process&quot;</property>
                              </emphasis> attribute usage you can find <link linkend="process"
                              >in the corresponding section </link>. </para>
                    
                

                    
                
                
                
                <para> The <emphasis>
                                        <property>&quot;label&quot;</property>
                              </emphasis> attribute is a generic attribute. The <emphasis>
                                        <property>&quot;label&quot;</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>&quot;DoubleRangeValidator.MAXIMUM&quot;</code>,
                              {2} for <code>&quot;ShortConverter.SHORT&quot;</code>. </para>
                    <para>The <emphasis>
                                        <property>&quot;defaultTime&quot;</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>&quot;resetTimeOnDateSelect&quot;</property>
                                                  </emphasis> attribute is set to
                                                  &quot;true&quot; </para>
                              </listitem>
                    </itemizedlist>
                    <para> The <emphasis>
                                        <property> &quot;enableManualInput&quot; </property>
                              </emphasis> attribute enables/disables input field, so when <code>
                                        enableManualInput = &quot;false&quot; </code>, user
                              can only pick the date manually and has no possibility to type in the
                              date (default value is &quot;false&quot;). </para>
                    <para>The <emphasis role="bold">
                                        <property>&lt;rich:calendar&gt;</property>
                              </emphasis> component allows to use <emphasis>
                                        <property>&quot;header&quot;</property>
                              </emphasis>, <emphasis>
                                        <property>&quot;footer&quot;</property>
                              </emphasis>, <emphasis>
                                        <property>&quot;optionalHeader&quot;</property>
                              </emphasis>, <emphasis>
                                        <property>&quot;optionalFooter&quot;</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>&quot;weekNumber&quot;</property>
                              </emphasis> facet with available <code>{weekNumber}</code>,
                                        <code>{elementId}</code> elements and <emphasis>
                                        <property>&quot;weekDay&quot;</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&apos;s shown on the picture above
                              <code>{selectedDateControl}</code>, <code>{todayControl}</code>
                              elements are placed in the <emphasis>
                                        <property>&quot;header&quot;</property>
                              </emphasis> facet, <code>{previousMonthControl}</code>,
                                        <code>{currentMonthControl}</code>,
                              <code>{nextMonthControl}</code> - in the <emphasis>
                                        <property>&quot;footer&quot;</property>
                              </emphasis> facet, <code>{weekDayLabelShort}</code> - in the <emphasis>
                                        <property>&quot;weekDay&quot;</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&apos;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&apos;s
                              necessary to define time in a pattern (for example, it could be
                              defined as &quot;<code>d/M/yy HH:mm</code>&quot;). Then after
                              you choose some data in the calendar, it becomes possible to manage
                              time for this date. For time editing it&apos;s necessary to click
                              on its field (see a picture below). To clean the field click on the
                              &quot;Clean&quot;.</para>

                    <figure>
                              <title>Timing</title>

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


                    <para>It&apos;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>JavaScript API</title>
                    <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&apos;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>

          </section>
          
          
          <section>
                    <title>
                              Facets
                    </title>        
                    <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 &quot;showHeader&quot;</entry>
                                                  </row>
                                                  <row>
                                                            <entry>footer</entry>
                                                            <entry>Redefines calendar footer. Related attribute is &quot;showFooter&quot;</entry>
                                                  </row>
                                                  <row>
                                                            <entry>optionalHeader</entry>
                                                            <entry>Defines calendar&apos;s optional header</entry>
                                                  </row>
                                                  <row>
                                                            <entry>optionalFooter</entry>
                                                            <entry>Defines calendar&apos;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 &quot;weekDayLabels&quot; and &quot;weekDayLabelsShort&quot;</entry>
                                                  </row>
                                        </tbody>
                              </tgroup>
                    </table>
          </section>


          <section>
                    <title>Look-and-Feel Customization</title>

                    <para>For skinnability implementation, the components use a <emphasis>
                                        <property>style class redefinition method.</property>
                              </emphasis> Default style classes are mapped on <emphasis>
                                        <property>skin parameters.</property>
                              </emphasis></para>

                    <para>There are two ways to redefine the appearance of all <emphasis role="bold">
                                        <property>&lt;rich:calendar&gt;</property>
                              </emphasis> components at once:</para>

                    <itemizedlist>
                              <listitem>
                                        <para>Redefine the corresponding skin parameters</para>
                              </listitem>

                              <listitem>
                                        <para>Add to your style sheets <emphasis>
                                                  <property>style classes</property>
                                                  </emphasis> used by a <emphasis role="bold">
                                                  <property>&lt;rich:calendar&gt;</property>
                                                  </emphasis> component</para>
                              </listitem>
                    </itemizedlist>
          </section>

          <section>
                    <title>Skin Parameters Redefinition</title>

                    <table>
                              <title>Skin parameters redefinition for a popup element</title>

                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                  <entry>Skin parameters</entry>

                                                  <entry>CSS properties</entry>
                                                  </row>
                                        </thead>

                                        <tbody>
                                                  <row>
                                                  <entry>panelBorderColor</entry>

                                                  <entry>border-color</entry>
                                                  </row>

                                        </tbody>
                              </tgroup>
                    </table>

                    <table>
                              <title>Skin parameters redefinition for headers (header, optional
                                        header)</title>

                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                  <entry>Skin parameters</entry>

                                                  <entry>CSS properties</entry>
                                                  </row>
                                        </thead>

                                        <tbody>
                                                  <row>
                                                  <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>

                                        </tbody>
                              </tgroup>
                    </table>

                    <table>
                              <title>Skin parameters redefinition for footers (footer, optional
                                        footer) and names of working days</title>

                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                  <entry>Skin parameters</entry>

                                                  <entry>CSS properties</entry>
                                                  </row>
                                        </thead>

                                        <tbody>
                                                  <row>
                                                  <entry>panelBorderColor</entry>

                                                  <entry>border-top-color</entry>
                                                  </row>

                                                  <row>
                                                  <entry>panelBorderColor</entry>

                                                  <entry>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>

                                        </tbody>
                              </tgroup>
                    </table>

                    <table>
                              <title>Skin parameters redefinition for weeks numbers</title>

                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                  <entry>Skin parameters</entry>

                                                  <entry>CSS properties</entry>
                                                  </row>
                                        </thead>

                                        <tbody>
                                                  <row>
                                                  <entry>panelBorderColor</entry>

                                                  <entry>border-bottom-color</entry>
                                                  </row>

                                                  <row>
                                                  <entry>panelBorderColor</entry>

                                                  <entry>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>

                                        </tbody>
                              </tgroup>
                    </table>

                    <table>
                              <title>Skin parameters redefinition for a toolBar and names of months</title>

                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                  <entry>Skin parameters</entry>

                                                  <entry>CSS properties</entry>
                                                  </row>
                                        </thead>

                                        <tbody>
                                                  <row>
                                                  <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>

                                        </tbody>
                              </tgroup>
                    </table>

                    <table>
                              <title>Skin parameters redefinition for cells with days</title>

                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                  <entry>Skin parameters</entry>

                                                  <entry>CSS properties</entry>
                                                  </row>
                                        </thead>

                                        <tbody>
                                                  <row>
                                                  <entry>panelBorderColor</entry>

                                                  <entry>border-bottom-color</entry>
                                                  </row>

                                                  <row>
                                                  <entry>panelBorderColor</entry>

                                                  <entry>border-right-color</entry>
                                                  </row>

                                                  <row>
                                                  <entry>generalBackgroundColor</entry>

                                                  <entry>background-color</entry>
                                                  </row>

                                                  <row>
                                                  <entry>generalSizeFont</entry>

                                                  <entry>font-size</entry>
                                                  </row>

                                                  <row>
                                                  <entry>generalFamilyFont</entry>

                                                  <entry>font-family</entry>
                                                  </row>

                                        </tbody>
                              </tgroup>
                    </table>

                    <table>
                              <title>Skin parameters redefinition for holiday</title>

                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                  <entry>Skin parameters</entry>

                                                  <entry>CSS properties</entry>
                                                  </row>
                                        </thead>

                                        <tbody>
                                                  <row>
                                                  <entry>calendarHolidaysBackgroundColor</entry>

                                                  <entry>background-color</entry>
                                                  </row>

                                                  <row>
                                                  <entry>calendarHolidaysTextColor</entry>

                                                  <entry>color</entry>
                                                  </row>

                                        </tbody>
                              </tgroup>
                    </table>

                    <table>
                              <title>Skin parameters redefinition for cell with a current date</title>

                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                  <entry>Skin parameters</entry>

                                                  <entry>CSS properties</entry>
                                                  </row>
                                        </thead>

                                        <tbody>
                                                  <row>
                                                  <entry>calendarCurrentBackgroundColor</entry>

                                                  <entry>background-color</entry>
                                                  </row>

                                                  <row>
                                                  <entry>calendarCurrentTextColor</entry>

                                                  <entry>color</entry>
                                                  </row>

                                        </tbody>
                              </tgroup>
                    </table>

                    <table>
                              <title>Skin parameters redefinition for a selected day</title>

                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                  <entry>Skin parameters</entry>

                                                  <entry>CSS properties</entry>
                                                  </row>
                                        </thead>

                                        <tbody>
                                                  <row>
                                                  <entry>headerBackgroundColor</entry>

                                                  <entry>background-color</entry>
                                                  </row>

                                                  <row>
                                                  <entry>headerTextColor</entry>

                                                  <entry>color</entry>
                                                  </row>

                                                  <row>
                                                  <entry>headerWeightFont</entry>

                                                  <entry>font-weight</entry>
                                                  </row>

                                        </tbody>
                              </tgroup>
                    </table>

                    <!-- Quick year & month selection-->
                    <table>
                              <title>Skin parameters redefinition for a popup element during quick
                                        month and year selection</title>
                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                  <entry>Skin parameters</entry>
                                                  <entry>CSS properties</entry>
                                                  </row>
                                        </thead>

                                        <tbody>

                                                  <row>
                                                  <entry>tableBackgroundColor</entry>
                                                  <entry>background</entry>
                                                  </row>

                                                  <row>
                                                  <entry>panelBorderColor</entry>
                                                  <entry>border-color</entry>
                                                  </row>

                                        </tbody>
                              </tgroup>
                    </table>
                    <table>
                              <title>Skin parameters redefinition for a shadow</title>
                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                  <entry>Skin parameters</entry>
                                                  <entry>CSS properties</entry>
                                                  </row>
                                        </thead>

                                        <tbody>

                                                  <row>
                                                  <entry>shadowBackgroundColor</entry>
                                                  <entry>background-color</entry>
                                                  </row>

                                        </tbody>
                              </tgroup>
                    </table>

                    <table>
                              <title>Skin parameters redefinition for a selected month and year</title>
                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                  <entry>Skin parameters</entry>
                                                  <entry>CSS properties</entry>
                                                  </row>
                                        </thead>

                                        <tbody>

                                                  <row>
                                                  <entry>calendarCurrentBackgroundColor</entry>
                                                  <entry>background-color</entry>
                                                  </row>

                                                  <row>
                                                  <entry>calendarCurrentTextColor</entry>
                                                  <entry>color</entry>
                                                  </row>

                                        </tbody>
                              </tgroup>
                    </table>

                    <table>
                              <title>Skin parameters redefinition for a hovered month and year</title>
                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                  <entry>Skin parameters</entry>
                                                  <entry>CSS properties</entry>
                                                  </row>
                                        </thead>

                                        <tbody>

                                                  <row>
                                                  <entry>panelBorderColor</entry>
                                                  <entry>border-color</entry>
                                                  </row>

                                                  <row>
                                                  <entry>calendarSpecBackgroundColor</entry>
                                                  <entry>background</entry>
                                                  </row>

                                        </tbody>
                              </tgroup>
                    </table>

                    <table>
                              <title>Skin parameters redefinition for a month items near split line</title>
                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                  <entry>Skin parameters</entry>
                                                  <entry>CSS properties</entry>
                                                  </row>
                                        </thead>
                                        <tbody>
                                                  <row>
                                                  <entry>panelBorderColor</entry>
                                                  <entry>border-right-color</entry>
                                                  </row>
                                        </tbody>
                              </tgroup>
                    </table>

                    <table>
                              <title>Skin parameters redefinition for a hovered toolbar items</title>
                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                  <entry>Skin parameters</entry>
                                                  <entry>CSS properties</entry>
                                                  </row>
                                        </thead>

                                        <tbody>

                                                  <row>
                                                  <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</entry>
                                                  </row>

                                                  <row>
                                                  <entry>panelBorderColor</entry>
                                                  <entry>border-bottom-color</entry>
                                                  </row>

                                        </tbody>
                              </tgroup>
                    </table>

                    <table>
                              <title>Skin parameters redefinition for a pressed toolbar items</title>
                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                  <entry>Skin parameters</entry>
                                                  <entry>CSS properties</entry>
                                                  </row>
                                        </thead>

                                        <tbody>

                                                  <row>
                                                  <entry>panelBorderColor</entry>
                                                  <entry>border-color</entry>
                                                  </row>

                                                  <row>
                                                  <entry>tableBackgroundColor</entry>
                                                  <entry>border-right-color</entry>
                                                  </row>

                                                  <row>
                                                  <entry>tableBackgroundColor</entry>
                                                  <entry>border-bottom-color</entry>
                                                  </row>

                                        </tbody>
                              </tgroup>
                    </table>

                    <table>
                              <title>Skin parameters redefinition for &quot;ok&quot; and
                                        &quot;cancel&quot; buttons</title>
                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                  <entry>Skin parameters</entry>
                                                  <entry>CSS properties</entry>
                                                  </row>
                                        </thead>

                                        <tbody>

                                                  <row>
                                                  <entry>additionalBackgroundColor</entry>
                                                  <entry>background</entry>
                                                  </row>

                                                  <row>
                                                  <entry>panelBorderColor</entry>
                                                  <entry>border-top-color</entry>
                                                  </row>

                                        </tbody>
                              </tgroup>
                    </table>

                    <!-- Time selection-->

                    <table>
                              <title>Skin parameters redefinition for a popup element during time
                                        selection</title>
                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                  <entry>Skin parameters</entry>
                                                  <entry>CSS properties</entry>
                                                  </row>
                                        </thead>

                                        <tbody>

                                                  <row>
                                                  <entry>additionalBackgroundColor</entry>
                                                  <entry>background</entry>
                                                  </row>

                                                  <row>
                                                  <entry>panelBorderColor</entry>
                                                  <entry>border-color</entry>
                                                  </row>

                                        </tbody>
                              </tgroup>
                    </table>

                    <table>
                              <title>Skin parameters redefinition for a wrapper &lt;td&gt;
                                        element for an input field</title>
                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                  <entry>Skin parameters</entry>
                                                  <entry>CSS properties</entry>
                                                  </row>
                                        </thead>

                                        <tbody>

                                                  <row>
                                                  <entry>controlBackgroundColor</entry>
                                                  <entry>background-color</entry>
                                                  </row>

                                                  <row>
                                                  <entry>panelBorderColor</entry>
                                                  <entry>border-color</entry>
                                                  </row>

                                                  <row>
                                                  <entry>subBorderColor</entry>
                                                  <entry>border-bottom-color</entry>
                                                  </row>

                                                  <row>
                                                  <entry>subBorderColor</entry>
                                                  <entry>border-right-color</entry>
                                                  </row>
                                        </tbody>
                              </tgroup>
                    </table>

                    <table>
                              <title>Skin parameters redefinition for an input field</title>
                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                  <entry>Skin parameters</entry>
                                                  <entry>CSS properties</entry>
                                                  </row>
                                        </thead>

                                        <tbody>

                                                  <row>
                                                  <entry>buttonSizeFont</entry>
                                                  <entry>font-size</entry>
                                                  </row>

                                                  <row>
                                                  <entry>buttonFamilyFont</entry>
                                                  <entry>font-family</entry>
                                                  </row>

                                        </tbody>
                              </tgroup>
                    </table>

                    <table>
                              <title>Skin parameters redefinition for a wrapper &lt;td&gt;
                                        element for spinner buttons</title>
                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                  <entry>Skin parameters</entry>
                                                  <entry>CSS properties</entry>
                                                  </row>
                                        </thead>

                                        <tbody>

                                                  <row>
                                                  <entry>headerBackgroundColor</entry>
                                                  <entry>background-color</entry>
                                                  </row>

                                                  <row>
                                                  <entry>headerBackgroundColor</entry>
                                                  <entry>border-color</entry>
                                                  </row>

                                        </tbody>
                              </tgroup>
                    </table>

          </section>

          <section>
                    <title>Definition of Custom Style Classes</title>

                    <para>On the screenshot there are classes names that define styles for component
                              elements.</para>

                    <figure>
                              <title>Style classes</title>
                              <mediaobject>
                                        <imageobject>
                                                  <imagedata fileref="images/calendar_cn1.png"
                                                  scalefit="1"/>
                                        </imageobject>
                              </mediaobject>
                    </figure>
                    <figure>
                              <title>Style classes</title>
                              <mediaobject>
                                        <imageobject>
                                                  <imagedata fileref="images/calendar_cn2.png"
                                                  scalefit="1"/>
                                        </imageobject>
                              </mediaobject>
                    </figure>
                    <figure>
                              <title>Style classes</title>
                              <mediaobject>
                                        <imageobject>
                                                  <imagedata fileref="images/calendar_cn3.png"
                                                  scalefit="1"/>
                                        </imageobject>
                              </mediaobject>

                    </figure>
                    <figure>
                              <title>Style classes</title>
                              <mediaobject>
                                        <imageobject>
                                                  <imagedata fileref="images/calendar_cn4.png"
                                                  scalefit="1"/>
                                        </imageobject>
                              </mediaobject>

                    </figure>
                    <table id="tab_cn3">
                              <title>Classes names that define an input field and a button
                                        appearance</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>

                                        </tbody>
                              </tgroup>
                    </table>

                    <table>
                              <title>Classes names that define a days appearance</title>

                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                  <entry>Class name</entry>

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

                                        <tbody>

                                                  <row>
                                                  <entry>rich-calendar-days</entry>

                                                  <entry>Defines styles for names of
                                                  working days in a
                                                  header</entry>
                                                  </row>

                                                  <row>
                                                  <entry>rich-calendar-weekends</entry>

                                                  <entry>Defines styles for names of
                                                  weekend in a header</entry>
                                                  </row>

                                                  <row>
                                                  <entry>rich-calendar-week</entry>

                                                  <entry>Defines styles for weeks
                                                  numbers</entry>
                                                  </row>

                                                  <row>
                                                  <entry>rich-calendar-today</entry>

                                                  <entry>Defines styles for cell with a
                                                  current date</entry>
                                                  </row>

                                                  <row>
                                                  <entry>rich-calendar-cell</entry>

                                                  <entry>Defines styles for cells with
                                                  days</entry>
                                                  </row>

                                                  <row>
                                                  <entry>rich-calendar-holly</entry>

                                                  <entry>Defines styles for
                                                  holiday</entry>
                                                  </row>

                                                  <row>
                                                  <entry>rich-calendar-select</entry>

                                                  <entry>Defines styles for a selected
                                                  day</entry>
                                                  </row>

                                                  <row>
                                                  <entry>rich-calendar-hover</entry>

                                                  <entry>Defines styles for a hovered
                                                  day</entry>
                                                  </row>

                                        </tbody>
                              </tgroup>
                    </table>

                    <table>
                              <title>Classes names that define a popup element</title>

                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                  <entry>Class name</entry>

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

                                        <tbody>
                                                  <row>
                                                  <entry>rich-calendar-popup</entry>

                                                  <entry>Defines styles for a popup
                                                  element</entry>
                                                  </row>
                                                  <row>
                                                  <entry>rich-calendar-exterior</entry>

                                                  <entry>Defines styles for a popup
                                                  element exterior</entry>
                                                  </row>

                                                  <row>
                                                  <entry>rich-calendar-tool</entry>

                                                  <entry>Defines styles for
                                                  toolbars</entry>
                                                  </row>

                                                  <row>
                                                  <entry>rich-calendar-month</entry>

                                                  <entry>Defines styles for names of
                                                  months</entry>
                                                  </row>

                                                  <row>
                                                  <entry>rich-calendar-header-optional</entry>

                                                  <entry>Defines styles for an optional
                                                  header</entry>
                                                  </row>

                                                  <row>
                                                  <entry>rich-calendar-footer-optional</entry>

                                                  <entry>Defines styles for an optional
                                                  footer</entry>
                                                  </row>

                                                  <row>
                                                  <entry>rich-calendar-header</entry>

                                                  <entry>Defines styles for a
                                                  header</entry>
                                                  </row>

                                                  <row>
                                                  <entry>rich-calendar-footer</entry>

                                                  <entry>Defines styles for a
                                                  footer</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 an inactive
                                                  boundary date</entry>
                                                  </row>

                                                  <row>
                                                  <entry>rich-calendar-toolfooter</entry>

                                                  <entry>Defines styles for a today
                                                  control date</entry>
                                                  </row>

                                        </tbody>
                              </tgroup>
                    </table>

                    <table>
                              <title>Classes names that define a popup element during quick month
                                        and year selection</title>

                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                  <entry>Class name</entry>
                                                  <entry>Description</entry>
                                                  </row>
                                        </thead>

                                        <tbody>
                                                  <row>
                                                  <entry>rich-calendar-date-layout</entry>
                                                  <entry>Defines styles for a popup
                                                  element during quick year
                                                  selection</entry>
                                                  </row>
                                                  <row>
                                                  <entry>rich-calendar-editor-layout-shadow</entry>
                                                  <entry>Defines styles for a
                                                  shadow</entry>
                                                  </row>
                                                  <row>
                                                  <entry>rich-calendar-editor-btn</entry>
                                                  <entry>Defines styles for an inactive
                                                  boundary date</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>
                                                  </row>
                                                  <row>
                                                  <entry>rich-calendar-editor-btn-selected</entry>
                                                  <entry>Defines styles for an selected
                                                  boundary date</entry>
                                                  </row>
                                                  <row>
                                                  <entry>rich-calendar-editor-btn-over</entry>
                                                  <entry>Defines styles for a boundary
                                                  date when pointer was moved
                                                  onto</entry>
                                                  </row>

                                                  <row>
                                                  <entry>rich-calendar-editor-tool-over</entry>
                                                  <entry>Defines styles for a hovered
                                                  toolbar items</entry>
                                                  </row>

                                                  <row>
                                                  <entry>rich-calendar-editor-tool-press</entry>
                                                  <entry>Defines styles for a pressed
                                                  toolbar items</entry>
                                                  </row>

                                                  <row>
                                                  <entry>rich-calendar-date-layout-ok</entry>
                                                  <entry>Defines styles for a
                                                  &quot;ok&quot;
                                                  button</entry>
                                                  </row>
                                                  <row>
                                                  <entry>rich-calendar-date-layout-cancel</entry>
                                                  <entry>Defines styles for a
                                                  &quot;cancel&quot;
                                                  button</entry>
                                                  </row>

                                        </tbody>
                              </tgroup>
                    </table>

                    <table>
                              <title>Classes names that define a popup element during time selection</title>

                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                  <entry>Class name</entry>
                                                  <entry>Description</entry>
                                                  </row>
                                        </thead>

                                        <tbody>
                                                  <row>
                                                  <entry>rich-calendar-time-layout</entry>
                                                  <entry>Defines styles for a popup
                                                  element during time
                                                  selection</entry>
                                                  </row>
                                                  <row>
                                                  <entry>rich-calendar-editor-layout-shadow</entry>
                                                  <entry>Defines styles for a
                                                  shadow</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-input-container</entry>
                                                  <entry>Defines styles for a wrapper
                                                  &lt;td&gt; element for
                                                  an input field</entry>
                                                  </row>
                                                  <row>
                                                  <entry>rich-calendar-spinner-input</entry>
                                                  <entry>Defines styles for an input
                                                  field</entry>
                                                  </row>
                                                  <row>
                                                  <entry>rich-calendar-spinner-buttons</entry>
                                                  <entry>Defines styles for a wrapper
                                                  &lt;td&gt; element for
                                                  spinner buttons</entry>
                                                  </row>
                                                  <row>
                                                  <entry>rich-calendar-spinner-up</entry>
                                                  <entry>Defines styles for a
                                                  &quot;up&quot;
                                                  button</entry>
                                                  </row>
                                                  <row>
                                                  <entry>rich-calendar-spinner-down</entry>
                                                  <entry>Defines styles for a
                                                  &quot;down&quot;
                                                  button</entry>
                                                  </row>
                                                  <row>
                                                  <entry>rich-calendar-time-layout-ok</entry>
                                                  <entry>Defines styles for a
                                                  &quot;ok&quot;
                                                  button</entry>
                                                  </row>
                                                  <row>
                                                  <entry>rich-calendar-time-layout-cancel</entry>
                                                  <entry>Defines styles for a
                                                  &quot;cancel&quot;
                                                  button</entry>
                                                  </row>
                                        </tbody>
                              </tgroup>
                    </table>

                    <para>In order to redefine styles for all <emphasis role="bold">
                                        <property>&lt;rich:calendar&gt;</property>
                              </emphasis> components on a page using CSS, it&apos;s enough to
                              create classes with the same names (possible classes could be found in
                              the tables <link linkend="tab_cn3"> above</link>) and define necessary
                              properties in them. </para>

                    <para>
                              <emphasis role="bold">Example:</emphasis>
                    </para>
                    <programlisting role="CSS"><![CDATA[...
.rich-calendar-today {
    background-color: #FF0000;
}
...]]></programlisting>

                    <para>This is a result:</para>

                    <figure>
                              <title>Redefinition styles with predefined classes</title>
                              <mediaobject>
                                        <imageobject>
                                                  <imagedata fileref="images/calendar_pc.png"/>
                                        </imageobject>
                              </mediaobject>
                    </figure>

                    <para>In the example an active cell background color was changed.</para>

                    <para>Also it&apos;s possible to change styles of particular <emphasis
                                        role="bold">
                                        <property>&lt;rich:calendar&gt;</property>
                              </emphasis> component. In this case you should create own style
                              classes and use them in corresponding <emphasis role="bold">
                                        <property>&lt;rich:calendar&gt;</property>
                              </emphasis>
                              <emphasis>
                                        <property>styleClass</property>
                              </emphasis> attributes. An example is placed below:</para>

                    <para>
                              <emphasis role="bold">Example:</emphasis>
                    </para>
                    <programlisting role="CSS"><![CDATA[...
.myFontClass{
    font-style: italic;
}
...]]></programlisting>
                    <para>The <emphasis>
                                        <property>&quot;inputClass&quot;</property>
                              </emphasis> attribute for <emphasis role="bold">
                                        <property>&lt;rich:calendar&gt; </property>
                              </emphasis> is defined as it&apos;s shown in the example below:</para>

                    <para>
                              <emphasis role="bold">Example:</emphasis>
                    </para>
                    <programlisting role="XML"><![CDATA[<rich:calendar ... inputClass="myFontClass"/>]]></programlisting>

                    <para>This is a result:</para>

                    <figure>
                              <title>Redefinition styles with own classes and <emphasis>
                                                  <property>styleClass</property>
                                        </emphasis> attributes</title>
                              <mediaobject>
                                        <imageobject>
                                                  <imagedata fileref="images/calendar_oc.png"/>
                                        </imageobject>
                              </mediaobject>
                    </figure>

                    <para>As it could be seen on the picture above, the font style for output text
                              was changed.</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>
