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


                    <para>
                              <emphasis role="bold">Example:</emphasis>
                    </para>
                    <programlisting role="XML"><![CDATA[...
      <rich:calendar popup="false"/>
...]]></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>
                                        <property>&quot;popup&quot; </property>
                              </emphasis> attribute defines calendar representation mode on a page.
                              If it&apos;s &quot;true&quot; the calendar is represented
                              on a page as an input field and a button. Clicking on the button calls
                              the calendar popup as it&apos;s shown on the picture below. </para>
                    <figure>
                              <title>Using the <emphasis>
                                                  <property>&quot;popup&quot;</property>
                                        </emphasis> attribute: calendar calls after you click on the
                                        button.</title>

                              <mediaobject>
                                        <imageobject>
                                                  <imagedata fileref="images/calendar_init.png"/>
                                        </imageobject>
                              </mediaobject>
                    </figure>
                    <para>Usage <emphasis>
                                        <property>&quot;currentDate&quot;</property>
                              </emphasis> attribute isn&apos;t available in the popup mode.</para>
                    <para>The <emphasis>
                                        <property>&quot;value&quot;</property>
                              </emphasis> attribute stores selected date currently.</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;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>The <emphasis role="bold">
                                        <property>&lt;rich:calendar&gt;</property>
                              </emphasis> component can render pages of days in two modes. A mode
                              could be defined with the <emphasis>
                                        <property>&quot;mode&quot;</property>
                              </emphasis> attribute with two possible parameters:
                                        &quot;<code>ajax</code>&quot; and
                                        &quot;<code>client</code>&quot;. Default value is
                                        <code>&quot;client&quot;</code>.</para>
                    <itemizedlist>
                              <listitem>
                                        <para>
                                                  <code>Ajax</code>
                                        </para>
                              </listitem>
                    </itemizedlist>
                    <para>Calendar requests portions of data from Data Model for a page rendering.
                              If <emphasis>
                                        <property>&quot;dataModel&quot;</property>
                              </emphasis> attribute has &quot;null&quot; 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>
                    <itemizedlist>
                              <listitem>
                                        <para>
                                                  <code>Client</code>
                                        </para>
                              </listitem>
                    </itemizedlist>
                    <para>Calendar loads an initial portion of data in a specified range and use
                              this data to render months. Additional data requests are not sent.</para>
                    <note>
                              <title>Note:</title>
                              <para><emphasis>
                                                  <property>&quot;preloadDateRangeBegin&quot;</property>
                                        </emphasis> and <emphasis>
                                                  <property>&quot;preloadDateRangeEnd&quot;</property>
                                        </emphasis> attributes were designed only for the
                                                  &quot;<code>client</code>&quot; mode to
                                        load some data initially.</para>
                    </note>
                    <para><emphasis>
                                        <property>&quot;ondateselect&quot;</property>
                              </emphasis> attribute is used to define an event that is triggered
                              before date selection.</para>
                    <para><emphasis>
                                        <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>
                    <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"
                              >here</link>. </para>
                    <para>There are three button-related attributes:</para>
                    <itemizedlist>
                              <listitem>
                                        <para><emphasis>
                                                  <property>&quot;buttonLabel&quot;</property>
                                                  </emphasis> defines a label for the button. If the
                                                  attribute is set <emphasis>
                                                  <property>&quot;buttonIcon&quot;</property>
                                                  </emphasis> and <emphasis>
                                                  <property>&quot;buttonIconDisabled&quot;</property>
                                                  </emphasis> are ignored </para>
                              </listitem>
                              <listitem>
                                        <para><emphasis>
                                                  <property>&quot;buttonIcon&quot;</property>
                                                  </emphasis> defines an icon for the button</para>
                              </listitem>
                              <listitem>
                                        <para><emphasis>
                                                  <property>&quot;buttonIconDisabled&quot;</property>
                                                  </emphasis> defines an icon for the disabled state
                                                  of the button</para>
                              </listitem>
                    </itemizedlist>
                    <para>The <emphasis>
                                        <property>&quot;direction&quot;</property>
                              </emphasis> and <emphasis>
                                        <property>&quot;jointPoint&quot;</property>
                              </emphasis> attributes are used for defining aspects of calendar
                              appearance.</para>
                    <para>The possible values for the <emphasis>
                                        <property>&quot;direction&quot;</property>
                              </emphasis> are: </para>
                    <itemizedlist>
                              <listitem>
                                        <para>&quot;top-left&quot; - a calendar drops to the
                                                  top and left</para>
                              </listitem>
                              <listitem>
                                        <para>&quot;top-right&quot; - a calendar drops to
                                                  the top and right</para>
                              </listitem>
                              <listitem>
                                        <para>&quot;bottom-left&quot; - a calendar drops to
                                                  the bottom and left</para>
                              </listitem>
                              <listitem>
                                        <para>&quot;bottom-right&quot; - a calendar drops to
                                                  the bottom and right</para>
                              </listitem>
                              <listitem>
                                        <para>&quot;auto&quot; - smart positioning
                                                  activation</para>
                              </listitem>
                    </itemizedlist>
                    <para> By default, the <emphasis>
                                        <property>&quot;direction&quot;</property>
                              </emphasis> attribute is set to &quot;bottom-right&quot;.</para>
                    <para>The possible values for the <emphasis>
                                        <property>&quot;jointPoint&quot;</property>
                              </emphasis> are: </para>
                    <itemizedlist>
                              <listitem>
                                        <para>&quot;top-left&quot; - a calendar docked to
                                                  the top-left point of the button element</para>
                              </listitem>
                              <listitem>
                                        <para>&quot;top-right&quot; - a calendar docked to
                                                  the top-right point of the button element</para>
                              </listitem>
                              <listitem>
                                        <para>&quot;bottom-left&quot; - a calendar docked to
                                                  the bottom-left point of the button element</para>
                              </listitem>
                              <listitem>
                                        <para>&quot;bottom-right&quot; - a calendar docked
                                                  to the bottom-right point of the button
                                        element</para>
                              </listitem>
                              <listitem>
                                        <para>&quot;auto&quot; - smart positioning
                                                  activation</para>
                              </listitem>
                    </itemizedlist>
                    <para> By default, the <emphasis>
                                        <property>&quot;jointPoint&quot;</property>
                              </emphasis> attribute is set to &quot;bottom-left&quot;.</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>
                                                  <code>CalendarDataModel</code>
                                        </para>
                              </listitem>
                              <listitem>
                                        <para>
                                                  <code>CalendarDataModelItem</code>
                                        </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>CalendarDataItems</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="http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone/docs/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"
                                        >Here</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>
