<?xml version="1.0" encoding="UTF-8"?>
<section>
  <sectioninfo>
    <keywordset>
      <keyword>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</title>

      <mediaobject>
        <imageobject>
          <imagedata fileref="images/calendar.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 ables to render pages of days in two modes. Switching mode could be
      defined with the <emphasis>
        <property>&quot;mode&quot;</property>
      </emphasis> attribute with two possible parameters: ajax and client. Default value is set to
      the &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><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.</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>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>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>top-left - a calendar drops to the top and left</listitem>
      <listitem>top-right - a calendar drops to the top and right</listitem>
      <listitem>bottom-left - a calendar drops to the bottom and left</listitem>
      <listitem>bottom-right - a calendar drops to the bottom and right</listitem>
      <listitem>auto - smart positioning activation</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>top-left - a calendar docked to the top-left point of the button element</listitem>
      <listitem>top-right - a calendar docked to the top-right point of the button element</listitem>
      <listitem>bottom-left - a calendar docked to the bottom-left point of the button element</listitem>
      <listitem>bottom-right - a calendar docked to the bottom-right point of the button element</listitem>
      <listitem>auto - smart positioning activation</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 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 program 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[...
         <a4j:form id="form">
                        <rich:calendar popup="true" rendered="#{!bean.check}" value="#{bean.date}" id="c"/>
                        <!--The link which is used to call a calendar popup externally-->
                        <a onclick="$('form:c').component.Expand()" href="#">Show</a>
        </a4j:form>
...
]]></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>CalendarDataModel</listitem>
      <listitem>CalendarDataModelItem</listitem>
    </itemizedlist>
    <para><property>CalendarDataModel</property> provides the following function:</para>
    <itemizedlist>
      <listitem>CalendarDataModelItem[] getData(Date[]);</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>Date getDate() - returns date from the item. Default implementation returns date.</listitem>
      <listitem>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;.</listitem>
      <listitem>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.</listitem>
      <listitem>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).</listitem>
    </itemizedlist>
  </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>Collapse()</entry>

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

          <row>
            <entry>Expand()</entry>

            <entry>Expands calendar element</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>
      <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 and define necessary properties in them.</para>

    <para>To change styles of particular <emphasis role="bold">
        <property>&lt;rich:calendar&gt;</property>
      </emphasis> components, define your own style classes in the corresponding <emphasis
        role="bold">
        <property>&lt;rich:calendar&gt;</property>
      </emphasis>attributes.</para>
    
    <para>CSS code piece used on a page:</para>
    
    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
    <programlisting role="CSS"><![CDATA[...
.rich-calendar-today {
    background-color: #00FA9A;
}
 .myClass {
     font-size: xx-large;
}
...]]></programlisting>
    <para>The component is defined in the following way:</para>
    
    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
    <programlisting role="XML"><![CDATA[<rich:calendar ... inputClass="myClass" .../>]]></programlisting>
    
  </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>
