[richfaces-svn-commits] JBoss Rich Faces SVN: r10039 - trunk/docs/userguide/en/src/main/docbook/included.

Author: atsebro Date: 2008-08-12 04:14:47 -0400 (Tue, 12 Aug 2008) New Revision: 10039 Modified: trunk/docs/userguide/en/src/main/docbook/included/calendar.xml Log: RF-3819: Avoiding of calendar incorrect appearance. The note has been added into the "6.24.5. Details of usage" section of the guide. Modified: trunk/docs/userguide/en/src/main/docbook/included/calendar.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/calendar.xml 2008-08-12 07:59:50 UTC (rev 10038) +++ trunk/docs/userguide/en/src/main/docbook/included/calendar.xml 2008-08-12 08:14:47 UTC (rev 10039) @@ -1,331 +1,401 @@ <?xml version="1.0" encoding="UTF-8"?> <section> - <sectioninfo> - <keywordset> - <keyword>rich:calendar</keyword> - </keywordset> - </sectioninfo> + <sectioninfo> + <keywordset> + <keyword>rich:calendar</keyword> + </keywordset> + </sectioninfo> - <table> - <title>Component identification parameters</title> + <table> + <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> + <entry>Value</entry> + </row> + </thead> - <tbody> - <row> - <entry>component-type</entry> + <tbody> + <row> + <entry>component-type</entry> - <entry>org.richfaces.Calendar</entry> - </row> + <entry>org.richfaces.Calendar</entry> + </row> - <row> - <entry>component-class</entry> + <row> + <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlCalendar</entry> - </row> + <entry>org.richfaces.component.html.HtmlCalendar</entry> + </row> - <row> - <entry>component-family</entry> + <row> + <entry>component-family</entry> - <entry>org.richfaces.Calendar</entry> - </row> + <entry>org.richfaces.Calendar</entry> + </row> - <row> - <entry>renderer-type</entry> + <row> + <entry>renderer-type</entry> - <entry>org.richfaces.CalendarRenderer</entry> - </row> + <entry>org.richfaces.CalendarRenderer</entry> + </row> - <row> - <entry>tag-class</entry> + <row> + <entry>tag-class</entry> - <entry>org.richfaces.taglib.CalendarTag</entry> - </row> - </tbody> - </tgroup> - </table> + <entry>org.richfaces.taglib.CalendarTag</entry> + </row> + </tbody> + </tgroup> + </table> - <section> - <title>Creating the Component with a Page Tag</title> + <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>To create the simplest variant on a page use the following syntax:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:calendar popup="false"/> ...]]></programlisting> - </section> + </section> - <section> - <title>Creating the Component Dynamically Using Java</title> + <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; + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlCalendar; ... HtmlCalendar myCalendar = new HtmlCalendar(); ... ]]></programlisting> - </section> + </section> - <section> - <title>Details of Usage</title> - <para>The <emphasis> - <property>&quot;popup&quot; - </property> - </emphasis> attribute defines calendar representation mode on a page. If it&apos;s - &quot;true&quot; the calendar is represented on a page as an input field and a button. - Clicking on the button calls the calendar popup as it&apos;s shown on the picture below. </para> - <figure> - <title>Using the <emphasis> - <property>&quot;popup&quot;</property> - </emphasis> attribute: calendar calls after you click on the button.</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/calendar_init.png"/> - </imageobject> - </mediaobject> - </figure> - <para>Usage <emphasis> - <property>&quot;currentDate&quot;</property> - </emphasis> attribute isn&apos;t available in the popup mode.</para> - <para>The <emphasis><property>&quot;value&quot;</property></emphasis> attribute stores selected date currently.</para> - <para>With help of the <emphasis><property>&quot;currentDate&quot;</property></emphasis> attribute - you can define month and year which will be displayed currently.</para> - <para> - The <emphasis><property>&quot;todayControlMode&quot;</property></emphasis> attribute defines the mode for &quot;today&quot; control. - Possible values are: - </para> - <itemizedlist> - <listitem> - <para>&quot;hidden&quot; - in this mode &quot;Today&quot; button will not be displayed</para> - </listitem> - <listitem> - <para>&quot;select&quot; - (default) in this state &quot;Today&quot; button activation will scroll the calendar to the current date and it become selected date</para> - </listitem> - <listitem> - <para>&quot;scroll&quot; - in this mode &quot;Today&quot; activation will simply scroll the calendar to current month without changing selected day.</para> - </listitem> - </itemizedlist> - <para>The <emphasis role="bold"> - <property>&lt;rich:calendar&gt;</property> - </emphasis> component can render pages of days in two modes. A mode could be - defined with the <emphasis> - <property>&quot;mode&quot;</property> - </emphasis> attribute with two possible parameters: &quot;<code>ajax</code>&quot; and &quot;<code>client</code>&quot;. Default value is - <code>&quot;client&quot;</code>.</para> - <itemizedlist> - <listitem> - <para><code>Ajax</code></para> - </listitem> - </itemizedlist> - <para>Calendar requests portions of data from Data Model for a page rendering. If <emphasis> - <property>&quot;dataModel&quot;</property> - </emphasis> attribute has &quot;null&quot; value, data requests - are not sent. In this case the &quot;<code>ajax</code>&quot; mode is equal to the - &quot;<code>client</code>&quot;. </para> - <itemizedlist> - <listitem> - <para><code>Client</code></para> - </listitem> - </itemizedlist> - <para>Calendar loads an initial portion of data in a specified range and use this data to render - months. Additional data requests are not sent.</para> - <note> - <title>Note:</title><para><emphasis> - <property>&quot;preloadDateRangeBegin&quot;</property> - </emphasis> and <emphasis> - <property>&quot;preloadDateRangeEnd&quot;</property> - </emphasis> attributes were designed only for the - &quot;<code>client</code>&quot; mode to load some data initially.</para></note> - <para><emphasis> - <property>&quot;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[... + <section> + <title>Details of Usage</title> + <para>The <emphasis> + <property>&quot;popup&quot; </property> + </emphasis> attribute defines calendar representation mode on a page. + If it&apos;s &quot;true&quot; the calendar is represented + on a page as an input field and a button. Clicking on the button calls + the calendar popup as it&apos;s shown on the picture below. </para> + <figure> + <title>Using the <emphasis> + <property>&quot;popup&quot;</property> + </emphasis> attribute: calendar calls after you click on the + button.</title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/calendar_init.png"/> + </imageobject> + </mediaobject> + </figure> + <para>Usage <emphasis> + <property>&quot;currentDate&quot;</property> + </emphasis> attribute isn&apos;t available in the popup mode.</para> + <para>The <emphasis> + <property>&quot;value&quot;</property> + </emphasis> attribute stores selected date currently.</para> + <para>With help of the <emphasis> + <property>&quot;currentDate&quot;</property> + </emphasis> attribute you can define month and year which will be + displayed currently.</para> + <para> The <emphasis> + <property>&quot;todayControlMode&quot;</property> + </emphasis> attribute defines the mode for &quot;today&quot; + control. Possible values are: </para> + <itemizedlist> + <listitem> + <para>&quot;hidden&quot; - in this mode + &quot;Today&quot; button will not be + displayed</para> + </listitem> + <listitem> + <para>&quot;select&quot; - (default) in this state + &quot;Today&quot; button activation will + scroll the calendar to the current date and it + become selected date</para> + </listitem> + <listitem> + <para>&quot;scroll&quot; - in this mode + &quot;Today&quot; activation will simply + scroll the calendar to current month without + changing selected day.</para> + </listitem> + </itemizedlist> + <para>The <emphasis role="bold"> + <property>&lt;rich:calendar&gt;</property> + </emphasis> component can render pages of days in two modes. A mode + could be defined with the <emphasis> + <property>&quot;mode&quot;</property> + </emphasis> attribute with two possible parameters: + &quot;<code>ajax</code>&quot; and + &quot;<code>client</code>&quot;. Default value is + <code>&quot;client&quot;</code>.</para> + <itemizedlist> + <listitem> + <para> + <code>Ajax</code> + </para> + </listitem> + </itemizedlist> + <para>Calendar requests portions of data from Data Model for a page rendering. + If <emphasis> + <property>&quot;dataModel&quot;</property> + </emphasis> attribute has &quot;null&quot; value, data + requests are not sent. In this case the + &quot;<code>ajax</code>&quot; mode is equal to the + &quot;<code>client</code>&quot;. </para> + <itemizedlist> + <listitem> + <para> + <code>Client</code> + </para> + </listitem> + </itemizedlist> + <para>Calendar loads an initial portion of data in a specified range and use + this data to render months. Additional data requests are not sent.</para> + <note> + <title>Note:</title> + <para><emphasis> + <property>&quot;preloadDateRangeBegin&quot;</property> + </emphasis> and <emphasis> + <property>&quot;preloadDateRangeEnd&quot;</property> + </emphasis> attributes were designed only for the + &quot;<code>client</code>&quot; mode to + load some data initially.</para> + </note> + <para><emphasis> + <property>&quot;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[... + <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 applied. - </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 not applied yet (you can change the logic of applying the value). Also this event could be used for possibility of "next/previous month" or "next/previous year" selection canceling. See an example below: - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + <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 applied. </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 not applied + yet (you can change the logic of applying the value). Also this event + could be used for possibility of "next/previous month" or + "next/previous year" selection canceling. See an example below: </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:calendar id="date" value="#{bean.dateTest}" oncurrentdateselect="if (!confirm('Are you sure to change month(year)?')){return false;}" oncurrentdateselected="alert('month(year) select:'+event.rich.date.toString());"/> ...]]></programlisting> - <para>How to use these attributes see also on the <ulink - url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... - >RichFaces Users Forum</ulink>.</para> - <para> - Information about the <emphasis><property>&quot;process&quot;</property></emphasis> attribute usage you can find <link linkend="process">here</link>. - </para> - <para>There are three button-related attributes:</para> - <itemizedlist> - <listitem> - <para><emphasis> - <property>&quot;buttonLabel&quot;</property> - </emphasis> defines a label for the button. If the attribute is set <emphasis><property>&quot;buttonIcon&quot;</property></emphasis> and - <emphasis><property>&quot;buttonIconDisabled&quot;</property></emphasis> are ignored </para> - </listitem> - <listitem> - <para><emphasis> - <property>&quot;buttonIcon&quot;</property> - </emphasis> defines an icon for the button</para> - </listitem> - <listitem> - <para><emphasis> - <property>&quot;buttonIconDisabled&quot;</property> - </emphasis> defines an icon for the disabled state of the button</para> - </listitem> - </itemizedlist> - <para>The <emphasis> - <property>&quot;direction&quot;</property> - </emphasis> and <emphasis> - <property>&quot;jointPoint&quot;</property> - </emphasis> attributes are used for defining aspects of calendar appearance.</para> - <para>The possible values for the <emphasis> - <property>&quot;direction&quot;</property> - </emphasis> are: </para> - <itemizedlist> - <listitem><para>&quot;top-left&quot; - a calendar drops to the top and left</para></listitem> - <listitem><para>&quot;top-right&quot; - a calendar drops to the top and right</para></listitem> - <listitem><para>&quot;bottom-left&quot; - a calendar drops to the bottom and left</para></listitem> - <listitem><para>&quot;bottom-right&quot; - a calendar drops to the bottom and right</para></listitem> - <listitem><para>&quot;auto&quot; - smart positioning activation</para></listitem> - </itemizedlist> - <para> By default, the <emphasis> - <property>&quot;direction&quot;</property> - </emphasis> attribute is set to &quot;bottom-right&quot;.</para> - <para>The possible values for the <emphasis> - <property>&quot;jointPoint&quot;</property> - </emphasis> are: </para> - <itemizedlist> - <listitem><para>&quot;top-left&quot; - a calendar docked to the top-left point of the button element</para></listitem> - <listitem><para>&quot;top-right&quot; - a calendar docked to the top-right point of the button element</para></listitem> - <listitem><para>&quot;bottom-left&quot; - a calendar docked to the bottom-left point of the button element</para></listitem> - <listitem><para>&quot;bottom-right&quot; - a calendar docked to the bottom-right point of the button element</para></listitem> - <listitem><para>&quot;auto&quot; - smart positioning activation</para></listitem> - </itemizedlist> - <para> By default, the <emphasis> - <property>&quot;jointPoint&quot;</property> - </emphasis> attribute is set to &quot;bottom-left&quot;.</para> - <para> - The <emphasis> - <property>&quot;label&quot;</property> - </emphasis> attribute is a generic attribute. - The <emphasis> - <property>&quot;label&quot;</property> - </emphasis> attribute provides an association between a component, and the message that the component (indirectly) produced. - This attribute defines the parameters of localized error and informational messages that - occur as a result of conversion, validation, or other application actions during the request - processing lifecycle. With the help of this attribute you can replace the - last parameter substitution token shown in the messages. For example, {1} for <code>&quot;DoubleRangeValidator.MAXIMUM&quot;</code>, {2} - for <code>&quot;ShortConverter.SHORT&quot;</code>. - </para> - <para>The <emphasis><property>&quot;defaultTime&quot;</property></emphasis> attribute to set the default time value for the current date in two cases:</para> - <itemizedlist> - <listitem> - <para> - If time is not set - </para> - </listitem> - <listitem> - <para> - If another date is selected and the value of the <emphasis><property>&quot;resetTimeOnDateSelect&quot;</property></emphasis> attribute is set to &quot;true&quot; - </para> - </listitem> - </itemizedlist> - <para> - The - <emphasis> - <property> - &quot;enableManualInput&quot; - </property> - </emphasis> - attribute enables/disables input field, so when - <code> - enableManualInput = &quot;false&quot; - </code>, - user can only pick the date manually and has no possibility to type in the date (default value is &quot;false&quot;). - </para> - <para>The <emphasis role="bold"> - <property>&lt;rich:calendar&gt;</property> - </emphasis> component allows to use <emphasis> - <property>&quot;header&quot;</property> - </emphasis>, <emphasis> - <property>&quot;footer&quot;</property> - </emphasis>, <emphasis> - <property>&quot;optionalHeader&quot;</property> - </emphasis>, <emphasis> - <property>&quot;optionalFooter&quot;</property> - </emphasis> facets. The following elements are available in these facets: - <code>{currentMonthControl}</code>, <code>{nextMonthControl}</code>, <code>{nextYearControl}</code>, <code>{previousYearControl}</code>, - <code>{previousMonthControl}</code>, <code>{todayControl}</code>, <code>{selectedDateControl}</code>. These elements could be used - for labels output.</para> - <para>Also you can use <emphasis> - <property>&quot;weekNumber&quot;</property> - </emphasis> facet with available <code>{weekNumber}</code>, <code>{elementId}</code> elements and <emphasis> - <property>&quot;weekDay&quot;</property> - </emphasis> facet with <code>{weekDayLabel}</code>, <code>{weekDayLabelShort}</code>, <code>{weekDayNumber}</code>, <code>{isWeekend}</code>, - <code>{elementId}</code> elements. <code>{weekNumber}</code>, <code>{weekDayLabel}</code>, <code>{weekDayLabelShort}</code>, <code>{weekDayNumber}</code> - elements could be used for labels output, <code>{isWeekend}</code>, <code>{elementId}</code> - for additional processing - in JavaScript code.</para> - <para>These elements are shown on the picture below.</para> + <para>How to use these attributes see also on the <ulink + url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... + >RichFaces Users Forum</ulink>.</para> + <para> Information about the <emphasis> + <property>&quot;process&quot;</property> + </emphasis> attribute usage you can find <link linkend="process" + >here</link>. </para> + <para>There are three button-related attributes:</para> + <itemizedlist> + <listitem> + <para><emphasis> + <property>&quot;buttonLabel&quot;</property> + </emphasis> defines a label for the button. If the + attribute is set <emphasis> + <property>&quot;buttonIcon&quot;</property> + </emphasis> and <emphasis> + <property>&quot;buttonIconDisabled&quot;</property> + </emphasis> are ignored </para> + </listitem> + <listitem> + <para><emphasis> + <property>&quot;buttonIcon&quot;</property> + </emphasis> defines an icon for the button</para> + </listitem> + <listitem> + <para><emphasis> + <property>&quot;buttonIconDisabled&quot;</property> + </emphasis> defines an icon for the disabled state + of the button</para> + </listitem> + </itemizedlist> + <para>The <emphasis> + <property>&quot;direction&quot;</property> + </emphasis> and <emphasis> + <property>&quot;jointPoint&quot;</property> + </emphasis> attributes are used for defining aspects of calendar + appearance.</para> + <para>The possible values for the <emphasis> + <property>&quot;direction&quot;</property> + </emphasis> are: </para> + <itemizedlist> + <listitem> + <para>&quot;top-left&quot; - a calendar drops to the + top and left</para> + </listitem> + <listitem> + <para>&quot;top-right&quot; - a calendar drops to + the top and right</para> + </listitem> + <listitem> + <para>&quot;bottom-left&quot; - a calendar drops to + the bottom and left</para> + </listitem> + <listitem> + <para>&quot;bottom-right&quot; - a calendar drops to + the bottom and right</para> + </listitem> + <listitem> + <para>&quot;auto&quot; - smart positioning + activation</para> + </listitem> + </itemizedlist> + <para> By default, the <emphasis> + <property>&quot;direction&quot;</property> + </emphasis> attribute is set to &quot;bottom-right&quot;.</para> + <para>The possible values for the <emphasis> + <property>&quot;jointPoint&quot;</property> + </emphasis> are: </para> + <itemizedlist> + <listitem> + <para>&quot;top-left&quot; - a calendar docked to + the top-left point of the button element</para> + </listitem> + <listitem> + <para>&quot;top-right&quot; - a calendar docked to + the top-right point of the button element</para> + </listitem> + <listitem> + <para>&quot;bottom-left&quot; - a calendar docked to + the bottom-left point of the button element</para> + </listitem> + <listitem> + <para>&quot;bottom-right&quot; - a calendar docked + to the bottom-right point of the button + element</para> + </listitem> + <listitem> + <para>&quot;auto&quot; - smart positioning + activation</para> + </listitem> + </itemizedlist> + <para> By default, the <emphasis> + <property>&quot;jointPoint&quot;</property> + </emphasis> attribute is set to &quot;bottom-left&quot;.</para> + <para> The <emphasis> + <property>&quot;label&quot;</property> + </emphasis> attribute is a generic attribute. The <emphasis> + <property>&quot;label&quot;</property> + </emphasis> attribute provides an association between a component, and + the message that the component (indirectly) produced. This attribute + defines the parameters of localized error and informational messages + that occur as a result of conversion, validation, or other application + actions during the request processing lifecycle. With the help of this + attribute you can replace the last parameter substitution token shown + in the messages. For example, {1} for + <code>&quot;DoubleRangeValidator.MAXIMUM&quot;</code>, + {2} for <code>&quot;ShortConverter.SHORT&quot;</code>. </para> + <para>The <emphasis> + <property>&quot;defaultTime&quot;</property> + </emphasis> attribute to set the default time value for the current + date in two cases:</para> + <itemizedlist> + <listitem> + <para> If time is not set </para> + </listitem> + <listitem> + <para> If another date is selected and the value of the <emphasis> + <property>&quot;resetTimeOnDateSelect&quot;</property> + </emphasis> attribute is set to + &quot;true&quot; </para> + </listitem> + </itemizedlist> + <para> The <emphasis> + <property> &quot;enableManualInput&quot; </property> + </emphasis> attribute enables/disables input field, so when <code> + enableManualInput = &quot;false&quot; </code>, user + can only pick the date manually and has no possibility to type in the + date (default value is &quot;false&quot;). </para> + <para>The <emphasis role="bold"> + <property>&lt;rich:calendar&gt;</property> + </emphasis> component allows to use <emphasis> + <property>&quot;header&quot;</property> + </emphasis>, <emphasis> + <property>&quot;footer&quot;</property> + </emphasis>, <emphasis> + <property>&quot;optionalHeader&quot;</property> + </emphasis>, <emphasis> + <property>&quot;optionalFooter&quot;</property> + </emphasis> facets. The following elements are available in these + facets: <code>{currentMonthControl}</code>, + <code>{nextMonthControl}</code>, <code>{nextYearControl}</code>, + <code>{previousYearControl}</code>, + <code>{previousMonthControl}</code>, + <code>{todayControl}</code>, <code>{selectedDateControl}</code>. These + elements could be used for labels output.</para> + <para>Also you can use <emphasis> + <property>&quot;weekNumber&quot;</property> + </emphasis> facet with available <code>{weekNumber}</code>, + <code>{elementId}</code> elements and <emphasis> + <property>&quot;weekDay&quot;</property> + </emphasis> facet with <code>{weekDayLabel}</code>, + <code>{weekDayLabelShort}</code>, + <code>{weekDayNumber}</code>, <code>{isWeekend}</code>, + <code>{elementId}</code> elements. + <code>{weekNumber}</code>, <code>{weekDayLabel}</code>, + <code>{weekDayLabelShort}</code>, + <code>{weekDayNumber}</code> elements could be used for labels output, + <code>{isWeekend}</code>, <code>{elementId}</code> - for + additional processing in JavaScript code.</para> + <para>These elements are shown on the picture below.</para> - <figure> - <title>Available elements</title> + <figure> + <title>Available elements</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/calendar3.png"/> - </imageobject> - </mediaobject> - </figure> + <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[... + <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{ @@ -336,8 +406,8 @@ } </style> ...]]></programlisting> - - <programlisting role="XML"><![CDATA[... + + <programlisting role="XML"><![CDATA[... <rich:calendar id="myCalendar" popup="true" locale="#{calendarBean.locale}" value="#{bean.date}" preloadRangeBegin="#{bean.date}" preloadRangeEnd="#{bean.date}" cellWidth="40px" cellHeight="40px"> @@ -369,64 +439,70 @@ </rich:calendar> ...]]></programlisting> - <para>This is a result:</para> - <figure> - <title>Facets usage</title> + <para>This is a result:</para> + <figure> + <title>Facets usage</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/calendar2.png"/> - </imageobject> - </mediaobject> - </figure> + <mediaobject> + <imageobject> + <imagedata fileref="images/calendar2.png"/> + </imageobject> + </mediaobject> + </figure> - <para>As it&apos;s shown on the picture above <code>{selectedDateControl}</code>, <code>{todayControl}</code> elements - are placed in the <emphasis> - <property>&quot;header&quot;</property> - </emphasis> facet, <code>{previousMonthControl}</code>, <code>{currentMonthControl}</code>, <code>{nextMonthControl}</code> - in the <emphasis> - <property>&quot;footer&quot;</property> - </emphasis> facet, <code>{weekDayLabelShort}</code> - in the <emphasis> - <property>&quot;weekDay&quot;</property> - </emphasis> facet, <code>{nextYearControl}</code>, <code>{previousYearControl}</code> are absent. Numbers of weeks are - red colored.</para> + <para>As it&apos;s shown on the picture above + <code>{selectedDateControl}</code>, <code>{todayControl}</code> + elements are placed in the <emphasis> + <property>&quot;header&quot;</property> + </emphasis> facet, <code>{previousMonthControl}</code>, + <code>{currentMonthControl}</code>, + <code>{nextMonthControl}</code> - in the <emphasis> + <property>&quot;footer&quot;</property> + </emphasis> facet, <code>{weekDayLabelShort}</code> - in the <emphasis> + <property>&quot;weekDay&quot;</property> + </emphasis> facet, <code>{nextYearControl}</code>, + <code>{previousYearControl}</code> are absent. Numbers of + weeks are red colored.</para> - <para> - It is possible to show and manage date. Except scrolling controls you can use quick month and year selection feature. - It&apos;s necessary to click on its field, i.e. current month control, and choose required month and year. - </para> - <figure> - <title>Quick month and year selection</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/calendar5.png"/> - </imageobject> - </mediaobject> - </figure> - <para>Also the <emphasis role="bold"> - <property>&lt;rich:calendar&gt;</property> - </emphasis> component allows to show and manage time. It&apos;s necessary to define time - in a pattern (for example, it could be defined as &quot;<code>d/M/yy HH:mm</code>&quot;). Then after - you choose some data in the calendar, it becomes possible to manage time for this date. For time editing - it&apos;s necessary to click on its field (see a picture below). To clean the field click - on the &quot;Clean&quot;.</para> - - <figure> - <title>Timing</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/calendar4.png"/> - </imageobject> - </mediaobject> - </figure> + <para> It is possible to show and manage date. Except scrolling controls you can + use quick month and year selection feature. It&apos;s necessary to + click on its field, i.e. current month control, and choose required + month and year. </para> + <figure> + <title>Quick month and year selection</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/calendar5.png"/> + </imageobject> + </mediaobject> + </figure> + <para>Also the <emphasis role="bold"> + <property>&lt;rich:calendar&gt;</property> + </emphasis> component allows to show and manage time. It&apos;s + necessary to define time in a pattern (for example, it could be + defined as &quot;<code>d/M/yy HH:mm</code>&quot;). Then after + you choose some data in the calendar, it becomes possible to manage + time for this date. For time editing it&apos;s necessary to click + on its field (see a picture below). To clean the field click on the + &quot;Clean&quot;.</para> + <figure> + <title>Timing</title> - <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[... + <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}" @@ -435,155 +511,210 @@ <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&... - >RichFaces Users Forum</ulink>.</para> - <para>The <emphasis role="bold"> - <property>&lt;rich:calendar&gt;</property> - </emphasis> component provides the possibility to use a special Data Model to define data for - element rendering. Data Model includes two major interfaces: </para> - <itemizedlist> - <listitem><para><code>CalendarDataModel</code></para></listitem> - <listitem><para><code>CalendarDataModelItem</code></para></listitem> - </itemizedlist> - <para><code>CalendarDataModel</code> provides the following function:</para> - <itemizedlist> - <listitem><para><code>CalendarDataModelItem[] getData(Date[])</code>;</para></listitem> - </itemizedlist> - <para>This method is called when it&apos;s necessary to represent the next block of - <code>CalendarDataItems</code>. It happens during navigation to the next (previous) month or in any other - case when calendar renders. This method is called in <emphasis> - <property>&quot;Ajax&quot;</property> - </emphasis> mode when the calendar renders a new page. </para> - <para><code>CalendarDataModelItem</code> provides the following function:</para> - <itemizedlist> - <listitem><para>Date <code>getDate()</code> - returns date from the item. Default implementation returns date.</para></listitem> - <listitem><para>Boolean <code>isEnabled()</code> - returns &quot;true&quot; - if date is <emphasis> - <property>&quot;selectable&quot;</property> - </emphasis> on the calendar. Default implementation returns &quot;true&quot;.</para></listitem> - <listitem><para>String <code>getStyleClass()</code> - returns string appended to the style class for the date - span. For example it could be &quot;relevant holyday&quot;. It means that the class - could be defined like the &quot;rich-cal-day-relevant-holyday&quot; one. Default - implementation returns empty string.</para></listitem> - <listitem><para>Object <code>getData()</code> - returns any additional payload that must be JSON-serializable - object. It could be used in the custom date representation on the calendar (inside the - custom facet).</para></listitem> - </itemizedlist> - - <para> - The <emphasis role="bold"> - <property>&lt;rich:calendar&gt;</property> - </emphasis> component provides the possibility to use internationalization method to redefine and localize the labels. - You could use application resource bundle and define - <code>RICH_CALENDAR_APPLY_LABEL</code>, - <code>RICH_CALENDAR_TODAY_LABEL</code>, - <code>RICH_CALENDAR_CLOSE_LABEL</code>, - <code>RICH_CALENDAR_OK_LABEL</code>, - <code>RICH_CALENDAR_CLEAN_LABEL</code>, - <code>RICH_CALENDAR_CANCEL_LABEL </code> there. - </para> - <para>You could also pack <code>org.richfaces.renderkit.calendar</code> <ulink url="http://labs.jboss.com/file-access/default/members/jbossrichface... - >resource</ulink> bundle with your JARs defining the same properties. - </para> - </section> + <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&... + >RichFaces Users Forum</ulink>.</para> + <para>The <emphasis role="bold"> + <property>&lt;rich:calendar&gt;</property> + </emphasis> component provides the possibility to use a special Data + Model to define data for element rendering. Data Model includes two + major interfaces: </para> + <itemizedlist> + <listitem> + <para> + <code>CalendarDataModel</code> + </para> + </listitem> + <listitem> + <para> + <code>CalendarDataModelItem</code> + </para> + </listitem> + </itemizedlist> + <para><code>CalendarDataModel</code> provides the following function:</para> + <itemizedlist> + <listitem> + <para><code>CalendarDataModelItem[] + getData(Date[])</code>;</para> + </listitem> + </itemizedlist> + <para>This method is called when it&apos;s necessary to represent the next + block of <code>CalendarDataItems</code>. It happens during navigation + to the next (previous) month or in any other case when calendar + renders. This method is called in <emphasis> + <property>&quot;Ajax&quot;</property> + </emphasis> mode when the calendar renders a new page. </para> + <para><code>CalendarDataModelItem</code> provides the following function:</para> + <itemizedlist> + <listitem> + <para>Date <code>getDate()</code> - returns date from the + item. Default implementation returns date.</para> + </listitem> + <listitem> + <para>Boolean <code>isEnabled()</code> - returns + &quot;true&quot; if date is <emphasis> + <property>&quot;selectable&quot;</property> + </emphasis> on the calendar. Default + implementation returns + &quot;true&quot;.</para> + </listitem> + <listitem> + <para>String <code>getStyleClass()</code> - returns string + appended to the style class for the date span. For + example it could be &quot;relevant + holyday&quot;. It means that the class could + be defined like the + &quot;rich-cal-day-relevant-holyday&quot; + one. Default implementation returns empty + string.</para> + </listitem> + <listitem> + <para>Object <code>getData()</code> - returns any additional + payload that must be JSON-serializable object. It + could be used in the custom date representation on + the calendar (inside the custom facet).</para> + </listitem> + </itemizedlist> - <section> - <title>JavaScript API</title> - <table> - <title>JavaScript API</title> + <para> The <emphasis role="bold"> + <property>&lt;rich:calendar&gt;</property> + </emphasis> component provides the possibility to use + internationalization method to redefine and localize the labels. You + could use application resource bundle and define + <code>RICH_CALENDAR_APPLY_LABEL</code>, + <code>RICH_CALENDAR_TODAY_LABEL</code>, + <code>RICH_CALENDAR_CLOSE_LABEL</code>, + <code>RICH_CALENDAR_OK_LABEL</code>, + <code>RICH_CALENDAR_CLEAN_LABEL</code>, + <code>RICH_CALENDAR_CANCEL_LABEL </code> there. </para> + <para>You could also pack <code>org.richfaces.renderkit.calendar</code> + <ulink + url="http://labs.jboss.com/file-access/default/members/jbossrichface... + >resource</ulink> bundle with your JARs defining the same + properties. + </para> + <note> + <title>Note:</title> + <para>Only for Internet Explorer 6 and later. + To make <emphasis role="bold"><property>&lt;rich:calendar&gt;</property></emphasis> inside <emphasis role="bold"><property>&lt;rich:modalPanel&gt;</property></emphasis> rendered properly, enable the standards-compliant mode. + Explore <ulink url="http://msdn.microsoft.com/en-us/library/ms535242(VS.85).aspx&qu... reference at MSDN</ulink> to find out how to do this. + </para> + </note> + + </section> - <tgroup cols="2"> - <thead> - <row> - <entry>Function</entry> + <section> + <title>JavaScript API</title> + <table> + <title>JavaScript API</title> - <entry>Description</entry> - </row> - </thead> + <tgroup cols="2"> + <thead> + <row> + <entry>Function</entry> - <tbody> + <entry>Description</entry> + </row> + </thead> - <row> - <entry>selectDate(date)</entry> + <tbody> - <entry>Selects the date specified. If the date isn&apos;t in current month - - performs request to select</entry> - </row> + <row> + <entry>selectDate(date)</entry> - <row> - <entry role="tbi">isDateEnabled(date)</entry> + <entry>Selects the date specified. If + the date isn&apos;t in + current month - performs + request to select</entry> + </row> - <entry role="tbi">Checks if given date is selectable (to be implemented)</entry> - </row> + <row> + <entry role="tbi">isDateEnabled(date)</entry> - <row> - <entry role="tbi">enableDate(date)</entry> + <entry role="tbi">Checks if given date + is selectable (to be + implemented)</entry> + </row> - <entry role="tbi">Enables date cell control on the calendar (to be implemented)</entry> - </row> + <row> + <entry role="tbi">enableDate(date)</entry> - <row> - <entry role="tbi">disableDate(date)</entry> + <entry role="tbi">Enables date cell + control on the calendar (to be + implemented)</entry> + </row> - <entry role="tbi">Disables date cell control on the calendar (to be implemented)</entry> - </row> + <row> + <entry role="tbi">disableDate(date)</entry> - <row> - <entry role="tbi">enableDates(date[])</entry> + <entry role="tbi">Disables date cell + control on the calendar (to be + implemented)</entry> + </row> - <entry role="tbi">Enables dates cell controls set on the calendar (to be implemented)</entry> - </row> + <row> + <entry role="tbi">enableDates(date[])</entry> - <row> - <entry role="tbi">disableDates(date[])</entry> + <entry role="tbi">Enables dates cell + controls set on the calendar + (to be implemented)</entry> + </row> - <entry role="tbi">Disables dates cell controls set on the calendar (to be implemented)</entry> - </row> + <row> + <entry role="tbi">disableDates(date[])</entry> - <row> - <entry>nextMonth()</entry> + <entry role="tbi">Disables dates cell + controls set on the calendar + (to be implemented)</entry> + </row> - <entry>Navigates to next month</entry> - </row> + <row> + <entry>nextMonth()</entry> - <row> - <entry>nextYear()</entry> + <entry>Navigates to next month</entry> + </row> - <entry>Navigates to next year</entry> - </row> + <row> + <entry>nextYear()</entry> - <row> - <entry>prevMonth()</entry> + <entry>Navigates to next year</entry> + </row> - <entry>Navigates to previous month </entry> - </row> + <row> + <entry>prevMonth()</entry> - <row> - <entry>prevYear()</entry> + <entry>Navigates to previous month + </entry> + </row> - <entry>Navigates to previous year</entry> - </row> + <row> + <entry>prevYear()</entry> - <row> - <entry>today()</entry> + <entry>Navigates to previous + year</entry> + </row> - <entry>Selects today date</entry> - </row> + <row> + <entry>today()</entry> - <row> - <entry>getSelectedDate()</entry> + <entry>Selects today date</entry> + </row> - <entry>Returns currently selected date</entry> - </row> + <row> + <entry>getSelectedDate()</entry> - <row> - <entry>Object getData()</entry> + <entry>Returns currently selected + date</entry> + </row> - <entry>Returns additional data for the date</entry> - </row> + <row> + <entry>Object getData()</entry> - <!-- + <entry>Returns additional data for the + date</entry> + </row> + + <!-- <row> <entry>enable()</entry> @@ -595,1171 +726,1263 @@ <entry>Disables calendar</entry> </row> - --> + --> - <row> - <entry>getCurrentMonth()</entry> + <row> + <entry>getCurrentMonth()</entry> - <entry>Returns number of the month currently being viewed</entry> - </row> + <entry>Returns number of the month + currently being viewed</entry> + </row> - <row> - <entry>getCurrentYear()</entry> + <row> + <entry>getCurrentYear()</entry> - <entry>Returns number of the year currently being viewed</entry> - </row> + <entry>Returns number of the year + currently being viewed</entry> + </row> - <row> - <entry>doCollapse()</entry> + <row> + <entry>doCollapse()</entry> - <entry>Collapses calendar element</entry> - </row> + <entry>Collapses calendar + element</entry> + </row> - <row> - <entry>doExpand()</entry> + <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> + <entry>Expands calendar element</entry> + </row> - </section> + <row> + <entry>resetSelectedDate()</entry> + <entry>Clears a selected day + value</entry> + </row> - <section> - <title>Look-and-Feel Customization</title> + <row> + <entry>doSwitch()</entry> - <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> + <entry>Inverts a state for the popup + calendar</entry> + </row> - <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> + </tbody> + </tgroup> + </table> - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> + </section> - <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> + <section> + <title>Look-and-Feel Customization</title> - <table> - <title>Skin parameters redefinition for a popup element</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> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> + <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> - <entry>CSS properties</entry> - </row> - </thead> + <itemizedlist> + <listitem> + <para>Redefine the corresponding skin parameters</para> + </listitem> - <tbody> - <row> - <entry>panelBorderColor</entry> + <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> - <entry>border-color</entry> - </row> + <section> + <title>Skin Parameters Redefinition</title> - </tbody> - </tgroup> - </table> + <table> + <title>Skin parameters redefinition for a popup element</title> - <table> - <title>Skin parameters redefinition for headers (header, optional header)</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> - <entry>CSS properties</entry> - </row> - </thead> + <tbody> + <row> + <entry>panelBorderColor</entry> - <tbody> - <row> - <entry>panelBorderColor</entry> + <entry>border-color</entry> + </row> - <entry>border-bottom-color</entry> - </row> + </tbody> + </tgroup> + </table> - <row> - <entry>additionalBackgroundColor</entry> + <table> + <title>Skin parameters redefinition for headers (header, optional + header)</title> - <entry>background-color</entry> - </row> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> - <row> - <entry>generalSizeFont</entry> + <entry>CSS properties</entry> + </row> + </thead> - <entry>font-size</entry> - </row> + <tbody> + <row> + <entry>panelBorderColor</entry> - <row> - <entry>generalFamilyFont</entry> + <entry>border-bottom-color</entry> + </row> - <entry>font-family</entry> - </row> + <row> + <entry>additionalBackgroundColor</entry> - </tbody> - </tgroup> - </table> + <entry>background-color</entry> + </row> - <table> - <title>Skin parameters redefinition for footers (footer, optional footer) and names of working - days</title> + <row> + <entry>generalSizeFont</entry> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> + <entry>font-size</entry> + </row> - <entry>CSS properties</entry> - </row> - </thead> + <row> + <entry>generalFamilyFont</entry> - <tbody> - <row> - <entry>panelBorderColor</entry> + <entry>font-family</entry> + </row> - <entry>border-top-color</entry> - </row> + </tbody> + </tgroup> + </table> - <row> - <entry>panelBorderColor</entry> + <table> + <title>Skin parameters redefinition for footers (footer, optional + footer) and names of working days</title> - <entry>border-right-color</entry> - </row> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> - <row> - <entry>additionalBackgroundColor</entry> + <entry>CSS properties</entry> + </row> + </thead> - <entry>background</entry> - </row> + <tbody> + <row> + <entry>panelBorderColor</entry> - <row> - <entry>generalSizeFont</entry> + <entry>border-top-color</entry> + </row> - <entry>font-size</entry> - </row> + <row> + <entry>panelBorderColor</entry> - <row> - <entry>generalFamilyFont</entry> + <entry>border-right-color</entry> + </row> - <entry>font-family</entry> - </row> + <row> + <entry>additionalBackgroundColor</entry> - </tbody> - </tgroup> - </table> + <entry>background</entry> + </row> - <table> - <title>Skin parameters redefinition for weeks numbers</title> + <row> + <entry>generalSizeFont</entry> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> + <entry>font-size</entry> + </row> - <entry>CSS properties</entry> - </row> - </thead> + <row> + <entry>generalFamilyFont</entry> - <tbody> - <row> - <entry>panelBorderColor</entry> + <entry>font-family</entry> + </row> - <entry>border-bottom-color</entry> - </row> + </tbody> + </tgroup> + </table> - <row> - <entry>panelBorderColor</entry> + <table> + <title>Skin parameters redefinition for weeks numbers</title> - <entry>border-right-color</entry> - </row> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> - <row> - <entry>additionalBackgroundColor</entry> + <entry>CSS properties</entry> + </row> + </thead> - <entry>background</entry> - </row> + <tbody> + <row> + <entry>panelBorderColor</entry> - <row> - <entry>calendarWeekBackgroundColor</entry> + <entry>border-bottom-color</entry> + </row> - <entry>background-color</entry> - </row> + <row> + <entry>panelBorderColor</entry> - <row> - <entry>generalSizeFont</entry> + <entry>border-right-color</entry> + </row> - <entry>font-size</entry> - </row> + <row> + <entry>additionalBackgroundColor</entry> - <row> - <entry>generalFamilyFont</entry> + <entry>background</entry> + </row> - <entry>font-family</entry> - </row> + <row> + <entry>calendarWeekBackgroundColor</entry> - </tbody> - </tgroup> - </table> + <entry>background-color</entry> + </row> - <table> - <title>Skin parameters redefinition for a toolBar and names of months</title> + <row> + <entry>generalSizeFont</entry> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> + <entry>font-size</entry> + </row> - <entry>CSS properties</entry> - </row> - </thead> + <row> + <entry>generalFamilyFont</entry> - <tbody> - <row> - <entry>headerBackgroundColor</entry> + <entry>font-family</entry> + </row> - <entry>background-color</entry> - </row> + </tbody> + </tgroup> + </table> - <row> - <entry>headerSizeFont</entry> + <table> + <title>Skin parameters redefinition for a toolBar and names of months</title> - <entry>font-size</entry> - </row> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> - <row> - <entry>headerFamilyFont</entry> + <entry>CSS properties</entry> + </row> + </thead> - <entry>font-family</entry> - </row> + <tbody> + <row> + <entry>headerBackgroundColor</entry> - <row> - <entry>headerWeightFont</entry> + <entry>background-color</entry> + </row> - <entry>font-weight</entry> - </row> + <row> + <entry>headerSizeFont</entry> - <row> - <entry>headerTextColor</entry> + <entry>font-size</entry> + </row> - <entry>color</entry> - </row> + <row> + <entry>headerFamilyFont</entry> - </tbody> - </tgroup> - </table> + <entry>font-family</entry> + </row> - <table> - <title>Skin parameters redefinition for cells with days</title> + <row> + <entry>headerWeightFont</entry> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> + <entry>font-weight</entry> + </row> - <entry>CSS properties</entry> - </row> - </thead> + <row> + <entry>headerTextColor</entry> - <tbody> - <row> - <entry>panelBorderColor</entry> + <entry>color</entry> + </row> - <entry>border-bottom-color</entry> - </row> + </tbody> + </tgroup> + </table> - <row> - <entry>panelBorderColor</entry> + <table> + <title>Skin parameters redefinition for cells with days</title> - <entry>border-right-color</entry> - </row> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> - <row> - <entry>generalBackgroundColor</entry> + <entry>CSS properties</entry> + </row> + </thead> - <entry>background-color</entry> - </row> + <tbody> + <row> + <entry>panelBorderColor</entry> - <row> - <entry>generalSizeFont</entry> + <entry>border-bottom-color</entry> + </row> - <entry>font-size</entry> - </row> + <row> + <entry>panelBorderColor</entry> - <row> - <entry>generalFamilyFont</entry> + <entry>border-right-color</entry> + </row> - <entry>font-family</entry> - </row> + <row> + <entry>generalBackgroundColor</entry> - </tbody> - </tgroup> - </table> + <entry>background-color</entry> + </row> - <table> - <title>Skin parameters redefinition for holiday</title> + <row> + <entry>generalSizeFont</entry> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> + <entry>font-size</entry> + </row> - <entry>CSS properties</entry> - </row> - </thead> + <row> + <entry>generalFamilyFont</entry> - <tbody> - <row> - <entry>calendarHolidaysBackgroundColor</entry> + <entry>font-family</entry> + </row> - <entry>background-color</entry> - </row> + </tbody> + </tgroup> + </table> - <row> - <entry>calendarHolidaysTextColor</entry> + <table> + <title>Skin parameters redefinition for holiday</title> - <entry>color</entry> - </row> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> - </tbody> - </tgroup> - </table> + <entry>CSS properties</entry> + </row> + </thead> - <table> - <title>Skin parameters redefinition for cell with a current date</title> + <tbody> + <row> + <entry>calendarHolidaysBackgroundColor</entry> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> + <entry>background-color</entry> + </row> - <entry>CSS properties</entry> - </row> - </thead> + <row> + <entry>calendarHolidaysTextColor</entry> - <tbody> - <row> - <entry>calendarCurrentBackgroundColor</entry> + <entry>color</entry> + </row> - <entry>background-color</entry> - </row> + </tbody> + </tgroup> + </table> - <row> - <entry>calendarCurrentTextColor</entry> + <table> + <title>Skin parameters redefinition for cell with a current date</title> - <entry>color</entry> - </row> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> - </tbody> - </tgroup> - </table> + <entry>CSS properties</entry> + </row> + </thead> - <table> - <title>Skin parameters redefinition for a selected day</title> + <tbody> + <row> + <entry>calendarCurrentBackgroundColor</entry> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> + <entry>background-color</entry> + </row> - <entry>CSS properties</entry> - </row> - </thead> + <row> + <entry>calendarCurrentTextColor</entry> - <tbody> - <row> - <entry>headerBackgroundColor</entry> + <entry>color</entry> + </row> - <entry>background-color</entry> - </row> + </tbody> + </tgroup> + </table> - <row> - <entry>headerTextColor</entry> + <table> + <title>Skin parameters redefinition for a selected day</title> - <entry>color</entry> - </row> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> - <row> - <entry>headerWeightFont</entry> + <entry>CSS properties</entry> + </row> + </thead> - <entry>font-weight</entry> - </row> + <tbody> + <row> + <entry>headerBackgroundColor</entry> - </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> + <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> + <row> + <entry>headerTextColor</entry> - <section> - <title>Definition of Custom Style Classes</title> + <entry>color</entry> + </row> - <para>On the screenshot there are classes names that define styles for component elements.</para> + <row> + <entry>headerWeightFont</entry> - <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> + <entry>font-weight</entry> + </row> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> + </tbody> + </tgroup> + </table> - <entry>Description</entry> - </row> - </thead> + <!-- 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>rich-calendar-input </entry> + <tbody> - <entry>Defines styles for an input field</entry> - </row> + <row> + <entry>tableBackgroundColor</entry> + <entry>background</entry> + </row> - <row> - <entry>rich-calendar-button</entry> + <row> + <entry>panelBorderColor</entry> + <entry>border-color</entry> + </row> - <entry>Defines styles for a popup button</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> - </tgroup> - </table> + <tbody> - <table> - <title>Classes names that define a days appearance</title> + <row> + <entry>shadowBackgroundColor</entry> + <entry>background-color</entry> + </row> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> + </tbody> + </tgroup> + </table> - <entry>Description</entry> - </row> - </thead> + <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> + <tbody> - <row> - <entry>rich-calendar-days</entry> + <row> + <entry>calendarCurrentBackgroundColor</entry> + <entry>background-color</entry> + </row> - <entry>Defines styles for names of working days in a header</entry> - </row> + <row> + <entry>calendarCurrentTextColor</entry> + <entry>color</entry> + </row> - <row> - <entry>rich-calendar-weekends</entry> + </tbody> + </tgroup> + </table> - <entry>Defines styles for names of weekend in a header</entry> - </row> + <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> - <row> - <entry>rich-calendar-week</entry> + <tbody> - <entry>Defines styles for weeks numbers</entry> - </row> + <row> + <entry>panelBorderColor</entry> + <entry>border-color</entry> + </row> - <row> - <entry>rich-calendar-today</entry> + <row> + <entry>calendarSpecBackgroundColor</entry> + <entry>background</entry> + </row> - <entry>Defines styles for cell with a current date</entry> - </row> + </tbody> + </tgroup> + </table> - <row> - <entry>rich-calendar-cell</entry> + <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> - <entry>Defines styles for cells with days</entry> - </row> + <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> - <row> - <entry>rich-calendar-holly</entry> + <tbody> - <entry>Defines styles for holiday</entry> - </row> + <row> + <entry>calendarWeekBackgroundColor</entry> + <entry>background-color</entry> + </row> - <row> - <entry>rich-calendar-select</entry> + <row> + <entry>generalTextColor</entry> + <entry>color</entry> + </row> - <entry>Defines styles for a selected day</entry> - </row> + <row> + <entry>tableBackgroundColor</entry> + <entry>border-color</entry> + </row> - <row> - <entry>rich-calendar-hover</entry> + <row> + <entry>panelBorderColor</entry> + <entry>border-right-color</entry> + </row> - <entry>Defines styles for a hovered day</entry> - </row> + <row> + <entry>panelBorderColor</entry> + <entry>border-bottom-color</entry> + </row> - </tbody> - </tgroup> - </table> + </tbody> + </tgroup> + </table> - <table> - <title>Classes names that define a popup element</title> + <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> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> + <tbody> - <entry>Description</entry> - </row> - </thead> + <row> + <entry>panelBorderColor</entry> + <entry>border-color</entry> + </row> - <tbody> - <row> - <entry>rich-calendar-popup</entry> + <row> + <entry>tableBackgroundColor</entry> + <entry>border-right-color</entry> + </row> - <entry>Defines styles for a popup element</entry> - </row> - <row> - <entry>rich-calendar-exterior</entry> + <row> + <entry>tableBackgroundColor</entry> + <entry>border-bottom-color</entry> + </row> - <entry>Defines styles for a popup element exterior</entry> - </row> + </tbody> + </tgroup> + </table> - <row> - <entry>rich-calendar-tool</entry> + <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> - <entry>Defines styles for toolbars</entry> - </row> + <tbody> - <row> - <entry>rich-calendar-month</entry> + <row> + <entry>additionalBackgroundColor</entry> + <entry>background</entry> + </row> - <entry>Defines styles for names of months</entry> - </row> + <row> + <entry>panelBorderColor</entry> + <entry>border-top-color</entry> + </row> - <row> - <entry>rich-calendar-header-optional</entry> + </tbody> + </tgroup> + </table> - <entry>Defines styles for an optional header</entry> - </row> + <!-- Time selection--> - <row> - <entry>rich-calendar-footer-optional</entry> + <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> - <entry>Defines styles for an optional footer</entry> - </row> + <tbody> - <row> - <entry>rich-calendar-header</entry> + <row> + <entry>additionalBackgroundColor</entry> + <entry>background</entry> + </row> - <entry>Defines styles for a header</entry> - </row> + <row> + <entry>panelBorderColor</entry> + <entry>border-color</entry> + </row> - <row> - <entry>rich-calendar-footer</entry> + </tbody> + </tgroup> + </table> - <entry>Defines styles for a footer</entry> - </row> + <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> - <row> - <entry>rich-calendar-boundary-dates</entry> + <tbody> - <entry>Defines styles for an active boundary button</entry> - </row> + <row> + <entry>controlBackgroundColor</entry> + <entry>background-color</entry> + </row> - <row> - <entry>rich-calendar-btn</entry> + <row> + <entry>panelBorderColor</entry> + <entry>border-color</entry> + </row> - <entry>Defines styles for an inactive boundary date</entry> - </row> + <row> + <entry>subBorderColor</entry> + <entry>border-bottom-color</entry> + </row> - <row> - <entry>rich-calendar-toolfooter</entry> + <row> + <entry>subBorderColor</entry> + <entry>border-right-color</entry> + </row> + </tbody> + </tgroup> + </table> - <entry>Defines styles for a today control date</entry> - </row> + <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> - </tgroup> - </table> + <tbody> - <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> + <row> + <entry>buttonSizeFont</entry> + <entry>font-size</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> + <row> + <entry>buttonFamilyFont</entry> + <entry>font-family</entry> + </row> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... + </tbody> + </tgroup> + </table> + + <table> + <title>Skin parameters redefinition for a wrapper &lt;td&gt; + element for spinner buttons</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + + <tbody> + + <row> + <entry>headerBackgroundColor</entry> + <entry>background-color</entry> + </row> + + <row> + <entry>headerBackgroundColor</entry> + <entry>border-color</entry> + </row> + + </tbody> + </tgroup> + </table> + + </section> + + <section> + <title>Definition of Custom Style Classes</title> + + <para>On the screenshot there are classes names that define styles for component + elements.</para> + + <figure> + <title>Style classes</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/calendar_cn1.png" + scalefit="1"/> + </imageobject> + </mediaobject> + </figure> + <figure> + <title>Style classes</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/calendar_cn2.png" + scalefit="1"/> + </imageobject> + </mediaobject> + </figure> + <figure> + <title>Style classes</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/calendar_cn3.png" + scalefit="1"/> + </imageobject> + </mediaobject> + + </figure> + <figure> + <title>Style classes</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/calendar_cn4.png" + scalefit="1"/> + </imageobject> + </mediaobject> + + </figure> + <table id="tab_cn3"> + <title>Classes names that define an input field and a button + appearance</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + <row> + <entry>rich-calendar-input </entry> + + <entry>Defines styles for an input + field</entry> + </row> + + <row> + <entry>rich-calendar-button</entry> + + <entry>Defines styles for a popup + button</entry> + </row> + + </tbody> + </tgroup> + </table> + + <table> + <title>Classes names that define a days appearance</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + + <row> + <entry>rich-calendar-days</entry> + + <entry>Defines styles for names of + working days in a + header</entry> + </row> + + <row> + <entry>rich-calendar-weekends</entry> + + <entry>Defines styles for names of + weekend in a header</entry> + </row> + + <row> + <entry>rich-calendar-week</entry> + + <entry>Defines styles for weeks + numbers</entry> + </row> + + <row> + <entry>rich-calendar-today</entry> + + <entry>Defines styles for cell with a + current date</entry> + </row> + + <row> + <entry>rich-calendar-cell</entry> + + <entry>Defines styles for cells with + days</entry> + </row> + + <row> + <entry>rich-calendar-holly</entry> + + <entry>Defines styles for + holiday</entry> + </row> + + <row> + <entry>rich-calendar-select</entry> + + <entry>Defines styles for a selected + day</entry> + </row> + + <row> + <entry>rich-calendar-hover</entry> + + <entry>Defines styles for a hovered + day</entry> + </row> + + </tbody> + </tgroup> + </table> + + <table> + <title>Classes names that define a popup element</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + <row> + <entry>rich-calendar-popup</entry> + + <entry>Defines styles for a popup + element</entry> + </row> + <row> + <entry>rich-calendar-exterior</entry> + + <entry>Defines styles for a popup + element exterior</entry> + </row> + + <row> + <entry>rich-calendar-tool</entry> + + <entry>Defines styles for + toolbars</entry> + </row> + + <row> + <entry>rich-calendar-month</entry> + + <entry>Defines styles for names of + months</entry> + </row> + + <row> + <entry>rich-calendar-header-optional</entry> + + <entry>Defines styles for an optional + header</entry> + </row> + + <row> + <entry>rich-calendar-footer-optional</entry> + + <entry>Defines styles for an optional + footer</entry> + </row> + + <row> + <entry>rich-calendar-header</entry> + + <entry>Defines styles for a + header</entry> + </row> + + <row> + <entry>rich-calendar-footer</entry> + + <entry>Defines styles for a + footer</entry> + </row> + + <row> + <entry>rich-calendar-boundary-dates</entry> + + <entry>Defines styles for an active + boundary button</entry> + </row> + + <row> + <entry>rich-calendar-btn</entry> + + <entry>Defines styles for an inactive + boundary date</entry> + </row> + + <row> + <entry>rich-calendar-toolfooter</entry> + + <entry>Defines styles for a today + control date</entry> + </row> + + </tbody> + </tgroup> + </table> + + <table> + <title>Classes names that define a popup element during quick month + and year selection</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + + <tbody> + <row> + <entry>rich-calendar-date-layout</entry> + <entry>Defines styles for a popup + element during quick year + selection</entry> + </row> + <row> + <entry>rich-calendar-editor-layout-shadow</entry> + <entry>Defines styles for a + shadow</entry> + </row> + <row> + <entry>rich-calendar-editor-btn</entry> + <entry>Defines styles for an inactive + boundary date</entry> + </row> + <row> + <entry>rich-calendar-date-layout-split</entry> + <entry>Defines styles for a wrapper + &lt;td&gt; element for + month items near split + line</entry> + </row> + <row> + <entry>rich-calendar-editor-btn-selected</entry> + <entry>Defines styles for an selected + boundary date</entry> + </row> + <row> + <entry>rich-calendar-editor-btn-over</entry> + <entry>Defines styles for a boundary + date when pointer was moved + onto</entry> + </row> + + <row> + <entry>rich-calendar-editor-tool-over</entry> + <entry>Defines styles for a hovered + toolbar items</entry> + </row> + + <row> + <entry>rich-calendar-editor-tool-press</entry> + <entry>Defines styles for a pressed + toolbar items</entry> + </row> + + <row> + <entry>rich-calendar-date-layout-ok</entry> + <entry>Defines styles for a + &quot;ok&quot; + button</entry> + </row> + <row> + <entry>rich-calendar-date-layout-cancel</entry> + <entry>Defines styles for a + &quot;cancel&quot; + button</entry> + </row> + + </tbody> + </tgroup> + </table> + + <table> + <title>Classes names that define a popup element during time selection</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + + <tbody> + <row> + <entry>rich-calendar-time-layout</entry> + <entry>Defines styles for a popup + element during time + selection</entry> + </row> + <row> + <entry>rich-calendar-editor-layout-shadow</entry> + <entry>Defines styles for a + shadow</entry> + </row> + <row> + <entry>rich-calendar-time-layout-fields</entry> + <entry>Defines styles for a wrapper + &lt;td&gt; element for + input fields and + buttons</entry> + </row> + <row> + <entry>rich-calendar-spinner-input-container</entry> + <entry>Defines styles for a wrapper + &lt;td&gt; element for + an input field</entry> + </row> + <row> + <entry>rich-calendar-spinner-input</entry> + <entry>Defines styles for an input + field</entry> + </row> + <row> + <entry>rich-calendar-spinner-buttons</entry> + <entry>Defines styles for a wrapper + &lt;td&gt; element for + spinner buttons</entry> + </row> + <row> + <entry>rich-calendar-spinner-up</entry> + <entry>Defines styles for a + &quot;up&quot; + button</entry> + </row> + <row> + <entry>rich-calendar-spinner-down</entry> + <entry>Defines styles for a + &quot;down&quot; + button</entry> + </row> + <row> + <entry>rich-calendar-time-layout-ok</entry> + <entry>Defines styles for a + &quot;ok&quot; + button</entry> + </row> + <row> + <entry>rich-calendar-time-layout-cancel</entry> + <entry>Defines styles for a + &quot;cancel&quot; + button</entry> + </row> + </tbody> + </tgroup> + </table> + + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:calendar&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to + create classes with the same names (possible classes could be found in + the tables <link linkend="tab_cn3"> above</link>) and define necessary + properties in them. </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="CSS"><![CDATA[... .rich-calendar-today { background-color: #FF0000; } -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/calendar_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example an active cell background color was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:calendar&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:calendar&gt;</property></emphasis> <emphasis><property>styleClass</property></emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... +...]]></programlisting> + + <para>This is a result:</para> + + <figure> + <title>Redefinition styles with predefined classes</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/calendar_pc.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>In the example an active cell background color was changed.</para> + + <para>Also it&apos;s possible to change styles of particular <emphasis + role="bold"> + <property>&lt;rich:calendar&gt;</property> + </emphasis> component. In this case you should create own style + classes and use them in corresponding <emphasis role="bold"> + <property>&lt;rich:calendar&gt;</property> + </emphasis> + <emphasis> + <property>styleClass</property> + </emphasis> attributes. An example is placed below:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="CSS"><![CDATA[... .myFontClass{ font-style: italic; } -...]]></programlisting> - <para>The <emphasis><property>&quot;inputClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:calendar&gt; </property></emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:calendar ... inputClass="myFontClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/calendar_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, the font style for output text was changed.</para> - - - </section> +...]]></programlisting> + <para>The <emphasis> + <property>&quot;inputClass&quot;</property> + </emphasis> attribute for <emphasis role="bold"> + <property>&lt;rich:calendar&gt; </property> + </emphasis> is defined as it&apos;s shown in the example below:</para> - <section> - <title>Relevant Resources Links</title> - <para><ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/calendar.js... - >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&... - >RichFaces Users Forum</ulink>.</para> - </section> + <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.js... + >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&... + >RichFaces Users Forum</ulink>.</para> + </section> + </section>