<?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 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;ajax&quot; and &quot;client&quot;. Default value is 
       &quot;client&quot;.</para>
    <itemizedlist>
      <listitem>
        <para>Ajax</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 <property>&quot;null&quot;</property> value, data requests
      are not sent. In this case the &quot;ajax&quot; mode is equal to the
      &quot;client&quot;. </para>
    <itemizedlist>
      <listitem>
        <para>Client</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 was designed only for the
      <property>&quot;client&quot;</property> mode to load some data initially.</para></note>
    <para><emphasis>
        <property>&quot;ondataselect&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;ondataselect&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;oncurrentdataselected&quot;</property>
      </emphasis> event is fired when the "next/previous month" or "next/previous year" button is pressed, 
      and the value is <property>applied</property>.
    </para>
    <para>
      <emphasis>
        <property>&quot;oncurrentdataselect&quot;</property>
      </emphasis> event is fired when the "next/previous month" or "next/previous year" button is pressed, 
      but the value is <property>not applied</property> yet (you can change the logic of upplying 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 "buttonIcon" and
          "buttonIconDisabled" are ignored </para>
      </listitem>
    </itemizedlist>
    <itemizedlist>
      <listitem>
        <para><emphasis>
            <property>&quot;buttonIcon&quot;</property>
          </emphasis> defines an icon for the button</para>
      </listitem>
    </itemizedlist>
    <itemizedlist>
      <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>top-left - a calendar drops to the top and left</para></listitem>
      <listitem><para>top-right - a calendar drops to the top and right</para></listitem>
      <listitem><para>bottom-left - a calendar drops to the bottom and left</para></listitem>
      <listitem><para>bottom-right - a calendar drops to the bottom and right</para></listitem>
      <listitem><para>auto - 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>top-left - a calendar docked to the top-left point of the button element</para></listitem>
      <listitem><para>top-right - a calendar docked to the top-right point of the button element</para></listitem>
      <listitem><para>bottom-left - a calendar docked to the bottom-left point of the button element</para></listitem>
      <listitem><para>bottom-right - a calendar docked to the bottom-right point of the button element</para></listitem>
      <listitem><para>auto - 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 “DoubleRangeValidator.MAXIMUM”, {2}
      for “ShortConverter.SHORT”.
    </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:
      {currentMonthControl}, {nextMonthControl}, {nextYearControl}, {previousYearControl},
      {previousMonthControl}, {todayControl}, {selectedDateControl}. These elements could be used
      for labels output.</para>
    <para>Also you can use <emphasis>
        <property>&quot;weekNumber&quot;</property>
      </emphasis> facet with available {weekNumber}, {elementId} elements and <emphasis>
        <property>&quot;weekDay&quot;</property>
      </emphasis> facet with {weekDayLabel}, {weekDayLabelShort}, {weekDayNumber}, {isWeekend},
      {elementId} elements. {weekNumber}, {weekDayLabel}, {weekDayLabelShort}, {weekDayNumber}
      elements could be used for labels output, {isWeekend}, {elementId} - 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}" selectedDate="#{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 {selectedDateControl}, {todayControl} elements
      are placed in the <emphasis>
        <property>&quot;header&quot;</property>
      </emphasis> facet, {previousMonthControl}, {currentMonthControl}, {nextMonthControl} - in the <emphasis>
        <property>&quot;footer&quot;</property>
      </emphasis> facet, {weekDayLabelShort} - in the <emphasis>
        <property>&quot;weekDay&quot;</property>
      </emphasis> facet, {nextYearControl}, {previousYearControl} 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;d/M/yy HH:mm&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>CalendarDataModel</para></listitem>
      <listitem><para>CalendarDataModelItem</para></listitem>
    </itemizedlist>
    <para><property>CalendarDataModel</property> provides the following function:</para>
    <itemizedlist>
      <listitem><para>CalendarDataModelItem[] getData(Date[]);</para></listitem>
    </itemizedlist>
    <para>This method is called when it&apos;s necessary to represent the next block of
      CalendarDataItems. 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><property>CalendarDataModelItem</property> provides the following function:</para>
    <itemizedlist>
      <listitem><para>Date getDate() - returns date from the item. Default implementation returns date.</para></listitem>
      <listitem><para>Boolean isEnabled() - returns <emphasis>
          <property>&quot;true&quot;</property>
        </emphasis> if date is <emphasis>
          <property>&quot;selectable&quot;</property>
        </emphasis> on the calendar. Default implementation returns &quot;true&quot;.</para></listitem>
      <listitem><para>String getStyleClass() - 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 getData() - 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 
      <property>RICH_CALENDAR_APPLY_LABEL</property>,
      <property>RICH_CALENDAR_TODAY_LABEL</property>,
      <property>RICH_CALENDAR_CLOSE_LABEL</property>,
      <property>RICH_CALENDAR_OK_LABEL</property>,
      <property>RICH_CALENDAR_CLEAN_LABEL</property>,
      <property>RICH_CALENDAR_CANCEL_LABEL </property> there. 
    </para>
    <para>You could also pack <property>org.richfaces.renderkit.calendar</property> <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>
  </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>isDateEnabled(date)</entry>

            <entry>Checks if given date is selectable</entry>
          </row>

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

            <entry>Enables date cell control on the calendar</entry>
          </row>

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

            <entry>Disables date cell control on the calendar</entry>
          </row>

          <row>
            <entry>enableDates(date[])</entry>

            <entry>Enables dates cell controls set on the calendar</entry>
          </row>

          <row>
            <entry>disableDates(date[])</entry>

            <entry>Disables dates cell controls set on the calendar</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>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’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’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>
