From richfaces-svn-commits at lists.jboss.org Tue Aug 12 04:14:48 2008 Content-Type: multipart/mixed; boundary="===============6318602347888085269==" MIME-Version: 1.0 From: richfaces-svn-commits at lists.jboss.org To: richfaces-svn-commits at lists.jboss.org Subject: [richfaces-svn-commits] JBoss Rich Faces SVN: r10039 - trunk/docs/userguide/en/src/main/docbook/included. Date: Tue, 12 Aug 2008 04:14:47 -0400 Message-ID: --===============6318602347888085269== Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: quoted-printable 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 =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- 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 @@
- - - rich:calendar - - + + + rich:calendar + + = - - Component identification parameters +
+ Component identification parameters = - - - - Name + + + + Name = - Value - - + Value + + = - - - component-type + + + component-type = - org.richfaces.Calendar - + org.richfaces.Cal= endar + = - - component-class + + component-class = - org.richfaces.component.html.HtmlCalendar - + org.richfaces.com= ponent.html.HtmlCalendar + = - - component-family + + component-family<= /entry> = - org.richfaces.Calendar - + org.richfaces.Cal= endar + = - - renderer-type + + renderer-type = - org.richfaces.CalendarRenderer - + org.richfaces.Cal= endarRenderer + = - - tag-class + + tag-class = - org.richfaces.taglib.CalendarTag - - - -
+ org.richfaces.tag= lib.CalendarTag + + + + = -
- Creating the Component with a Page Tag +
+ Creating the Component with a Page Tag = - To create the simplest variant on a page use the following synta= x: + To create the simplest variant on a page use the= following syntax: = = - - Example: - - + Example: + + ...]]> -
+
= -
- Creating the Component Dynamically Using Java +
+ Creating the Component Dynamically Using Java</= title> = - <para> - <emphasis role=3D"bold">Example:</emphasis> - </para> - <programlisting role=3D"JAVA"><![CDATA[import org.richfaces.component.= html.HtmlCalendar; = + <para> + <emphasis role=3D"bold">Example:</emphasis> + </para> + <programlisting role=3D"JAVA"><![CDATA[import org.rich= faces.component.html.HtmlCalendar; = ... HtmlCalendar myCalendar =3D new HtmlCalendar(); ... ]]></programlisting> - </section> + </section> = - <section> - <title>Details of Usage - The - "popup" - - attribute defines calendar representation mode on a page= . If it's - "true" the calendar is represented on a page as an input f= ield and a button. - Clicking on the button calls the calendar popup as it's shown o= n the picture below. -
- Using the <emphasis> - <property>"popup"</property> - </emphasis> attribute: calendar calls after you click on the butto= n. - = - - - - - -
- Usage - "currentDate" - attribute isn't available in the popup mode. - The "value" a= ttribute stores selected date currently. - With help of the "currentDate" attribute - you can define month and year which will be displayed currently. - - The "todayControlMode" attribute defines the mode for "today" control. = - Possible values are: - - - - "hidden" - in this mode "Today" button will = not be displayed - - - "select" - (default) in this state "Today" b= utton activation will scroll the calendar to the current date and it become= selected date - - - "scroll" - in this mode "Today" activation wi= ll simply scroll the calendar to current month without changing selected da= y. - - - The - <rich:calendar> - component can render pages of days in two modes. A mode = could be - defined with the - "mode" - attribute with two possible parameters: "ajax= " and "client". Default value is = - "client". - - - Ajax - - - Calendar requests portions of data from Data Model for a page re= ndering. If - "dataModel" - attribute has "null" value, data requests - are not sent. In this case the "ajax" mode is= equal to the - "client". - - - Client - - - Calendar loads an initial portion of data in a specified range a= nd use this data to render - months. Additional data requests are not sent. - - Note: - "preloadDateRangeBegin" - and - "preloadDateRangeEnd" - attributes were designed only for the - "client" mode to load some data initially.<= /para> - - "ondataselect" - attribute is used to define an event that is triggered b= efore date selection. - - "ondateselected" - attribute is used to define an event that is triggered a= fter date selection. - For example, to fire some event after date selection you should = use - <a4j:support> - . And it should be bound to - "ondateselected" - event as it's shown in the example below: - + Details of Usage + The + "popup" + attribute defines calendar repre= sentation mode on a page. + If it's "true" the calendar i= s represented + on a page as an input field and a button. Cl= icking on the button calls + the calendar popup as it's shown on the= picture below. +
+ Using the <emphasis> + <property>"popup&qu= ot;</property> + </emphasis> attribute: calendar ca= lls after you click on the + button. + + + + + + +
+ Usage + "currentDate"<= /property> + attribute isn't available i= n the popup mode. + The + "value" + attribute stores selected date c= urrently. + With help of the + "currentDate"<= /property> + attribute you can define month a= nd year which will be + displayed currently. + The + "todayControlMode&q= uot; + attribute defines the mode for &= quot;today" + control. Possible values are: + + + "hidden" - in this= mode + "Today" button= will not be + displayed + + + "select" - (defaul= t) in this state + "Today" button= activation will + scroll the calendar to t= he current date and it + become selected date + + + "scroll" - in this= mode + "Today" activa= tion will simply + scroll the calendar to c= urrent month without + changing selected day. + + + The + <rich:calendar> + component can render pages of da= ys in two modes. A mode + could be defined with the + "mode" + attribute with two possible para= meters: + "ajax" and + "client". D= efault value is + "client". + + + + Ajax + + + + Calendar requests portions of data from Data Mod= el for a page rendering. + If + "dataModel" + attribute has "null" v= alue, data + requests are not sent. In this case the + "ajax" mode is equal = to the + "client". <= /para> + + + + Client + + + + Calendar loads an initial portion of data in a s= pecified range and use + this data to render months. Additional data = requests are not sent. + + Note: + + "preloadD= ateRangeBegin" + and + "preloadD= ateRangeEnd" + attributes were design= ed only for the + "client" mode to + load some data initially. + + + "ondataselect"= + attribute is used to define an e= vent that is triggered + before date selection. + + "ondateselected&quo= t; + attribute is used to define an e= vent that is triggered + after date selection. + For example, to fire some event after date selec= tion you should use + + <a4j:support> + . And it should be bound to + "ondateselected&quo= t; + event as it's shown in the = example below: + = = ...]]> - - "ondataselect" - could be used for possibility of date selection cancelin= g. See an example below: - + "ondataselect"= + could be used for possibility of= date selection canceling. + See an example below: + ...]]> - - = - - "oncurrentdataselected" - event is fired when the "next/previous month" or "next/p= revious year" button is pressed, = - and the value is applied. - - - - "oncurrentdataselect" - event is fired when the "next/previous month" or "next/p= revious year" button is pressed, = - but the value is not applied yet (you can change the logic of applyi= ng the value). Also this event could be used for possibility of "next/prev= ious month" or "next/previous year" selection canceling. See an example bel= ow: - - - Example: - - + + "oncurrentdataselec= ted" + event is fired when the "next/pr= evious month" or + "next/previous year" button is pressed, and = the value is applied. + + + "oncurrentdataselec= t" + event is fired when the "next/pr= evious month" or + "next/previous year" button is pressed, but = the value is not applied + yet (you can change the logic of applying th= e value). Also this event + could be used for possibility of "next/previ= ous month" or + "next/previous year" selection canceling. Se= e an example below: + + Example: + + ...]]> - How to use these attributes see also on the RichFaces Users Forum. - - Information about the "process" attribute usage you can find here= . - - There are three button-related attributes: - - - - "buttonLabel" - defines a label for the button. If the attribute is = set "buttonIcon" and - "buttonIconDisabled" are ignored - - - - "buttonIcon" - defines an icon for the button - - - - "buttonIconDisabled" - defines an icon for the disabled state of the button= - - - The - "direction" - and - "jointPoint" - attributes are used for defining aspects of calendar app= earance. - The possible values for the - "direction" - are: - - "top-left" - a calendar drops to the top a= nd left - "top-right" - a calendar drops to the top = and right - "bottom-left" - a calendar drops to the bo= ttom and left - "bottom-right" - a calendar drops to the b= ottom and right - "auto" - smart positioning activation - - By default, the - "direction" - attribute is set to "bottom-right". - The possible values for the - "jointPoint" - are: - - "top-left" - a calendar docked to the top-= left point of the button element - "top-right" - a calendar docked to the top= -right point of the button element - "bottom-left" - a calendar docked to the b= ottom-left point of the button element - "bottom-right" - a calendar docked to the = bottom-right point of the button element - "auto" - smart positioning activation - - By default, the - "jointPoint" - attribute is set to "bottom-left". - - The - "label" - attribute is a generic attribute. - The - "label" - attribute provides an association between a component, a= nd the message that the component (indirectly) produced. = - This attribute defines the parameters of localized error and informa= tional messages that - occur as a result of conversion, validation, or other application ac= tions during the request - processing lifecycle. With the help of this attribute you can repla= ce the - last parameter substitution token shown in the messages. For example= , {1} for "DoubleRangeValidator.MAXIMUM", {2} - for "ShortConverter.SHORT". - - The "defaultTime" attribute to set the default time value for the current date in tw= o cases: = - - - - If time is not set - - = - - - If another date is selected and the value of the "resetTimeOnDateSelect" attribute is se= t to "true" - - - - - The = - - - "enableManualInput" - - = - attribute enables/disables input field, so when = - - enableManualInput =3D "false" - , - user can only pick the date manually and has no possibility to type= in the date (default value is "false"). - - The - <rich:calendar> - component allows to use - "header" - , - "footer" - , - "optionalHeader" - , - "optionalFooter" - facets. The following elements are available in these fa= cets: - {currentMonthControl}, {nextMonthControl},= {nextYearControl}, {previousYearControl}, - {previousMonthControl}, {todayControl}, {selectedDateControl}. These elements could be used - for labels output. - Also you can use - "weekNumber" - facet with available {weekNumber}, {e= lementId} elements and - "weekDay" - facet with {weekDayLabel}, {weekDayLa= belShort}, {weekDayNumber}, {isWeekend}, - {elementId} elements. {weekNumber}, = {weekDayLabel}, {weekDayLabelShort}, {weekDayNumb= er} - elements could be used for labels output, {isWeekend}, = {elementId} - for additional processing - in JavaScript code. - These elements are shown on the picture below. + How to use these attributes see also on the RichFaces Users Forum. + Information about the + "process" + attribute usage you can find here. + There are three button-related attributes: + + + + "buttonLa= bel" + defines a la= bel for the button. If the + attribute is set + "buttonIc= on" + and + "buttonIc= onDisabled" + are ignored = + + + + "buttonIc= on" + defines an i= con for the button + + + + "buttonIc= onDisabled" + defines an i= con for the disabled state + of the button + + + The + "direction" + and + "jointPoint" + attributes are used for defining= aspects of calendar + appearance. + The possible values for the + "direction" + are: + + + "top-left" - a cal= endar drops to the + top and left + + + "top-right" - a ca= lendar drops to + the top and right + + + "bottom-left" - a = calendar drops to + the bottom and left + + + "bottom-right" - a= calendar drops to + the bottom and right + + + "auto" - smart pos= itioning + activation + + + By default, the + "direction" + attribute is set to "bottom= -right". + The possible values for the + "jointPoint" + are: + + + "top-left" - a cal= endar docked to + the top-left point of th= e button element + + + "top-right" - a ca= lendar docked to + the top-right point of t= he button element + + + "bottom-left" - a = calendar docked to + the bottom-left point of= the button element + + + "bottom-right" - a= calendar docked + to the bottom-right poin= t of the button + element + + + "auto" - smart pos= itioning + activation + + + By default, the + "jointPoint" + attribute is set to "bottom= -left". + The + "label" + attribute is a generic attribute= . The + "label" + attribute provides an associatio= n between a component, and + the message that the component (indirectly) = produced. This attribute + defines the parameters of localized error an= d informational messages + that occur as a result of conversion, valida= tion, or other application + actions during the request processing lifecy= cle. With the help of this + attribute you can replace the last parameter= substitution token shown + in the messages. For example, {1} for + "DoubleRangeValidator.M= AXIMUM", + {2} for "ShortConverter.SHORT&quo= t;. + The + "defaultTime"<= /property> + attribute to set the default tim= e value for the current + date in two cases: + + + If time is not set + + + If another date is selected= and the value of the + "resetTim= eOnDateSelect" + attribute is= set to + "true" + + + The + "enableManualInput= " + attribute enables/disables input= field, so when + enableManualInput =3D "false&= quot; , user + can only pick the date manually and has no p= ossibility to type in the + date (default value is "false"). <= /para> + The + <rich:calendar> + component allows to use + "header" + , + "footer" + , + "optionalHeader&quo= t; + , + "optionalFooter&quo= t; + facets. The following elements a= re available in these + facets: {currentMonthControl}, + {nextMonthControl}, {next= YearControl}, + {previousYearControl}, + {previousMonthControl}, + {todayControl}, {selected= DateControl}. These + elements could be used for labels output. + Also you can use + "weekNumber" + facet with available {week= Number}, + {elementId} elements = and + "weekDay" + facet with {weekDayLabel}<= /code>, + {weekDayLabelShort}, + {weekDayNumber}, {isWeeke= nd}, + {elementId} elements. + {weekNumber}, {weekDayLab= el}, + {weekDayLabelShort}, + {weekDayNumber} elements could = be used for labels output, + {isWeekend}, {e= lementId} - for + additional processing in JavaScript code. + These elements are shown on the picture below. = -
- Available elements +
+ Available elements = - - - - - -
+ + + + + +
= - Simple example of usage is placed below. - - Example: - - Simple example of usage is placed below. + + Example: + + = ...]]> - = - = @@ -369,64 +439,70 @@ ...]]> = - This is a result: -
- Facets usage + This is a result: +
+ Facets usage = - - - - - -
+ + + + + +
= - As it's shown on the picture above {selectedDateContr= ol}, {todayControl} elements - are placed in the - "header" - facet, {previousMonthControl}, {curre= ntMonthControl}, {nextMonthControl} - in the - "footer" - facet, {weekDayLabelShort} - in the - "weekDay" - facet, {nextYearControl}, {previousYe= arControl} are absent. Numbers of weeks are - red colored. + As it's shown on the picture above + {selectedDateControl}, {t= odayControl} + elements are placed in the + "header" + facet, {previousMonthContr= ol}, + {currentMonthControl}, + {nextMonthControl} - in the + "footer" + facet, {weekDayLabelShort}= - in the + "weekDay" + facet, {nextYearControl}, + {previousYearControl}= are absent. Numbers of + weeks are red colored. = - - It is possible to show and manage date. Except scrolling controls yo= u can use quick month and year selection feature. = - It's necessary to click on its field, i.e. current month contro= l, and choose required month and year. = - -
- Quick month and year selection - - - - - -
- Also the - <rich:calendar> - component allows to show and manage time. It's nece= ssary to define time - in a pattern (for example, it could be defined as "d/M/yy= HH:mm"). Then after - you choose some data in the calendar, it becomes possible to manage = time for this date. For time editing - it's necessary to click on its field (see a picture below). To = clean the field click - on the "Clean". - = -
- Timing - = - - - - - -
+ It is possible to show and manage date. Except = scrolling controls you can + use quick month and year selection feature. = It's necessary to + click on its field, i.e. current month contr= ol, and choose required + month and year. +
+ Quick month and year selection + + + + + +
+ Also the + <rich:calendar> + component allows to show and man= age time. It's + necessary to define time in a pattern (for e= xample, it could be + defined as "d/M/yy HH:mm&q= uot;). Then after + you choose some data in the calendar, it bec= omes 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 + "Clean". = +
+ Timing = - It's possible to handle events for calendar from JavaScript= code. A simplest - example of usage JavaScript API is placed below: - - Example: - - + + + + +
+ + + It's possible to handle events for calendar= from JavaScript code. + A simplest example of usage JavaScript API i= s placed below: + + Example: + + ...]]> = - Also the discussion about this problem can be found on the RichFaces Users Forum. - The - <rich:calendar> - component provides the possibility to use a special Data= Model to define data for - element rendering. Data Model includes two major interfaces: - - CalendarDataModel - CalendarDataModelItem - - CalendarDataModel provides the following function:<= /para> - - CalendarDataModelItem[] getData(Date[])= ; - - This method is called when it'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 - "Ajax" - mode when the calendar renders a new page. - CalendarDataModelItem provides the following functi= on: - - Date getDate() - returns date from the = item. Default implementation returns date. - Boolean isEnabled() - returns "tru= e" - if date is - "selectable" - on the calendar. Default implementation returns "= true". - String getStyleClass() - returns string= appended to the style class for the date - span. For example it could be "relevant holyday". It mea= ns that the class - could be defined like the "rich-cal-day-relevant-holyday"= ; one. Default - implementation returns empty string. - Object getData() - returns any addition= al payload that must be JSON-serializable - object. It could be used in the custom date representation on the = calendar (inside the - custom facet). - - = - - The - <rich:calendar> - component provides the possibility to use internationali= zation method to redefine and localize the labels. = - You could use application resource bundle and define = - RICH_CALENDAR_APPLY_LABEL, - RICH_CALENDAR_TODAY_LABEL, - RICH_CALENDAR_CLOSE_LABEL, - RICH_CALENDAR_OK_LABEL, - RICH_CALENDAR_CLEAN_LABEL, - RICH_CALENDAR_CANCEL_LABEL there. = - - You could also pack org.richfaces.renderkit.calendar resource bundle with your JARs defining the same properties. - -
+ Also the discussion about this problem can be fo= und on the RichFaces Users Forum. + The + <rich:calendar> + component provides the possibili= ty to use a special Data + Model to define data for element rendering. = Data Model includes two + major interfaces: + + + + CalendarDataModel<= /code> + + + + + CalendarDataModelI= tem + + + + CalendarDataModel provides the foll= owing function: + + + CalendarDataModelItem[] + getData(Date[]); + + + This method is called when it's necessary t= o 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 + "Ajax" + mode when the calendar renders a= new page. + CalendarDataModelItem provides the = following function: + + + Date getDate() = - returns date from the + item. Default implementa= tion returns date. + + + Boolean isEnabled() - returns + "true" if date= is + "selectab= le" + on the calen= dar. Default + implementation returns + "true". + + + String getStyleClass()= - returns string + appended to the style cl= ass for the date span. For + example it could be &quo= t;relevant + holyday". It means = that the class could + be defined like the + "rich-cal-day-relev= ant-holyday" + one. Default implementat= ion returns empty + string. + + + Object getData() - returns any additional + payload that must be JSO= N-serializable object. It + could be used in the cus= tom date representation on + the calendar (inside the= custom facet). + + = -
- JavaScript API - - JavaScript API + The + <rich:calendar> + component provides the possibili= ty to use + internationalization method to redefine and = localize the labels. You + could use application resource bundle and de= fine + RICH_CALENDAR_APPLY_LABEL, + RICH_CALENDAR_TODAY_LABEL, + RICH_CALENDAR_CLOSE_LABEL, + RICH_CALENDAR_OK_LABEL, + RICH_CALENDAR_CLEAN_LABEL, + RICH_CALENDAR_CANCEL_LABEL <= /code> there. + You could also pack org.richfaces.renderki= t.calendar + resource bundle with your= JARs defining the same + properties. = + + + Note: + Only for Internet Explorer 6 and later= . = + To make <rich:calendar> inside <rich:modalPanel> rendered = properly, enable the standards-compliant mode. = + Explore !DOCTYPE reference at MSD= N to find out how to do this. + + + = + = - - - - Function +
+ JavaScript API +
+ JavaScript API = - Description - - + + + + Function = - + Description + + = - - selectDate(date) + = - Selects the date specified. If the date isn't in c= urrent month - - performs request to select - + + selectDate(date)<= /entry> = - - isDateEnabled(date) + Selects the date = specified. If + the date isn't in + current month - performs + request to select + = - Checks if given date is selectable (to be = implemented) - + + isDa= teEnabled(date) = - - enableDate(date) + Chec= ks if given date + is selectable (to be + implemented) + = - Enables date cell control on the calendar = (to be implemented) - + + enab= leDate(date) = - - disableDate(date) + Enab= les date cell + control on the calendar = (to be + implemented) + = - Disables date cell control on the calendar= (to be implemented) - + + disa= bleDate(date) = - - enableDates(date[]) + Disa= bles date cell + control on the calendar = (to be + implemented) + = - Enables dates cell controls set on the cal= endar (to be implemented) - + + enab= leDates(date[]) = - - disableDates(date[]) + Enab= les dates cell + controls set on the cale= ndar + (to be implemented) + = - Disables dates cell controls set on the ca= lendar (to be implemented) - + + disa= bleDates(date[]) = - - nextMonth() + Disa= bles dates cell + controls set on the cale= ndar + (to be implemented) + = - Navigates to next month - + + nextMonth() = - - nextYear() + Navigates to next= month + = - Navigates to next year - + + nextYear() = - - prevMonth() + Navigates to next= year + = - Navigates to previous month - + + prevMonth() = - - prevYear() + Navigates to prev= ious month + + = - Navigates to previous year - + + prevYear() = - - today() + Navigates to prev= ious + year + = - Selects today date - + + today() = - - getSelectedDate() + Selects today dat= e + = - Returns currently selected date - + + getSelectedDate()= = - - Object getData() + Returns currently= selected + date + = - Returns additional data for the date - + + Object getData()<= /entry> = - = + --> = - - getCurrentMonth() + + getCurrentMonth()= = - Returns number of the month currently being viewed - + Returns number of= the month + currently being viewed + = - - getCurrentYear() + + getCurrentYear()<= /entry> = - Returns number of the year currently being viewed - + Returns number of= the year + currently being viewed + = - - doCollapse() + + doCollapse() = - Collapses calendar element - + Collapses calendar + element + = - - doExpand() + + doExpand() = - Expands calendar element - - = - - resetSelectedDate() - = - Clears a selected day value - - = - - doSwitch() - = - Inverts a state for the popup calendar - - = - - -
+ Expands calendar = element + = -
+ + resetSelectedDate= () = + Clears a selected= day + value + = -
- Look-and-Feel Customization + + doSwitch() = - For skinnability implementation, the components use a - style class redefinition method. - Default style classes are mapped on - skin parameters. - + Inverts a state f= or the popup + calendar + = - There are two ways to redefine the appearance of all - <rich:calendar> - components at once: + + + = - - - Redefine the corresponding skin parameters - +
= - - Add to your style sheets - style classes - used by a - <rich:calendar> - component - - -
= -
- Skin Parameters Redefinition +
+ Look-and-Feel Customization = - - Skin parameters redefinition for a popup element + For skinnability implementation, the components = use a + style class redefinition= method. + Default style classes are mapped= on + skin parameters. + = - - - - Skin parameters + There are two ways to redefine the appearance of= all + <rich:calendar> + components at once: = - CSS properties - - + + + Redefine the corresponding s= kin parameters + = - - - panelBorderColor + + Add to your style sheets + style classes<= /property> + used by a + <rich:calen= dar> + component + + + = - border-color - +
+ Skin Parameters Redefinition = -
- -
+ + Skin parameters redefinition for a po= pup element = -
- Skin parameters redefinition for headers (header, optional he= ader) + + + + Skin parameters = - - - - Skin parameters + CSS properties + + = - CSS properties - - + + + panelBorderColor<= /entry> = - - - panelBorderColor + border-color + = - border-bottom-color - + + +
= - - additionalBackgroundColor + + Skin parameters redefinition for head= ers (header, optional + header) = - background-color - + + + + Skin parameters = - - generalSizeFont + CSS properties + + = - font-size - + + + panelBorderColor<= /entry> = - - generalFamilyFont + border-bottom-col= or + = - font-family - + + additionalBackgro= undColor = - - -
+ background-color<= /entry> + = - - Skin parameters redefinition for footers (footer, optional fo= oter) and names of working - days + + generalSizeFont = - - - - Skin parameters + font-size + = - CSS properties - - + + generalFamilyFont= = - - - panelBorderColor + font-family + = - border-top-color - + + +
= - - panelBorderColor + + Skin parameters redefinition for foot= ers (footer, optional + footer) and names of working days<= /title> = - <entry>border-right-color</entry> - </row> + <tgroup cols=3D"2"> + <thead> + <row> + <entry>Skin parameters</= entry> = - <row> - <entry>additionalBackgroundColor</entry> + <entry>CSS properties</e= ntry> + </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-colo= r</entry> + </row> = - <entry>font-family</entry> - </row> + <row> + <entry>additionalBackgro= undColor</entry> = - </tbody> - </tgroup> - </table> + <entry>background</entry> + </row> = - <table> - <title>Skin parameters redefinition for weeks numbers + + generalSizeFont = - - - - Skin parameters + font-size + = - CSS properties - - + + generalFamilyFont= = - - - panelBorderColor + font-family + = - border-bottom-color - + + +
= - - panelBorderColor + + Skin parameters redefinition for week= s numbers = - border-right-color - + + + + Skin parameters = - - additionalBackgroundColor + CSS properties + + = - background - + + + panelBorderColor<= /entry> = - - calendarWeekBackgroundColor + border-bottom-col= or + = - background-color - + + panelBorderColor<= /entry> = - - generalSizeFont + border-right-colo= r + = - font-size - + + additionalBackgro= undColor = - - generalFamilyFont + background + = - font-family - + + calendarWeekBackg= roundColor = - - -
+ background-color<= /entry> + = - - Skin parameters redefinition for a toolBar and names of month= s + + generalSizeFont = - - - - Skin parameters + font-size + = - CSS properties - - + + generalFamilyFont= = - - - headerBackgroundColor + font-family + = - background-color - + + +
= - - headerSizeFont + + Skin parameters redefinition for a to= olBar and names of months = - font-size - + + + + Skin parameters = - - headerFamilyFont + CSS properties + + = - font-family - + + + headerBackgroundC= olor = - - headerWeightFont + background-color<= /entry> + = - font-weight - + + headerSizeFont = - - headerTextColor + font-size + = - color - + + headerFamilyFont<= /entry> = - - -
+ font-family + = - - Skin parameters redefinition for cells with days + + headerWeightFont<= /entry> = - - - - Skin parameters + font-weight + = - CSS properties - - + + headerTextColor = - - - panelBorderColor + color + = - border-bottom-color - + + +
= - - panelBorderColor + + Skin parameters redefinition for cell= s with days = - border-right-color - + + + + Skin parameters = - - generalBackgroundColor + CSS properties + + = - background-color - + + + panelBorderColor<= /entry> = - - generalSizeFont + border-bottom-col= or + = - font-size - + + panelBorderColor<= /entry> = - - generalFamilyFont + border-right-colo= r + = - font-family - + + generalBackground= Color = - - -
+ background-color<= /entry> + = - - Skin parameters redefinition for holiday + + generalSizeFont = - - - - Skin parameters + font-size + = - CSS properties - - + + generalFamilyFont= = - - - calendarHolidaysBackgroundColor + font-family + = - background-color - + + +
= - - calendarHolidaysTextColor + + Skin parameters redefinition for holi= day = - color - + + + + Skin parameters = - - -
+ CSS properties + + = - - Skin parameters redefinition for cell with a current date</ti= tle> + <tbody> + <row> + <entry>calendarHolidaysB= ackgroundColor</entry> = - <tgroup cols=3D"2"> - <thead> - <row> - <entry>Skin parameters</entry> + <entry>background-color<= /entry> + </row> = - <entry>CSS properties</entry> - </row> - </thead> + <row> + <entry>calendarHolidaysT= extColor</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 = - color - + + + + Skin parameters = - - -
+ CSS properties + + = - - Skin parameters redefinition for a selected day + + + calendarCurrentBa= ckgroundColor = - - - - Skin parameters + background-color<= /entry> + = - CSS properties - - + + calendarCurrentTe= xtColor = - - - headerBackgroundColor + color + = - background-color - + + +
= - - headerTextColor + + Skin parameters redefinition for a se= lected day = - color - + + + + Skin parameters = - - headerWeightFont + CSS properties + + = - font-weight - + + + headerBackgroundC= olor = - - -
- = - - - Skin parameters redefinition for a popup element during quick= month and year selection - - - - Skin parameters - CSS properties - - - = - - = - - tableBackgroundColor - background - - = - - panelBorderColor - border-color - - = - - -
- - Skin parameters redefinition for a shadow - - - - Skin parameters - CSS properties - - - = - - = - - shadowBackgroundColor - background-color - + background-color<= /entry> + = - - -
- = - - Skin parameters redefinition for a selected month and year</t= itle> - <tgroup cols=3D"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</ti= tle> - <tgroup cols=3D"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 lin= e - - - - Skin parameters - CSS properties - - - - - panelBorderColor - border-right-color - - - -
- = - - Skin parameters redefinition for a hovered toolbar items</tit= le> - <tgroup cols=3D"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</tit= le> - <tgroup cols=3D"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 "ok" and "can= cel" buttons - - - - Skin parameters - CSS properties - - - = - - = - - additionalBackgroundColor - background - - = - - panelBorderColor - border-top-color - - = - - -
- = - - = - - Skin parameters redefinition for a popup element during time = selection - - - - Skin parameters - CSS properties - - - = - - = - - additionalBackgroundColor - background - - = - - panelBorderColor - border-color - - = - - -
- = - - Skin parameters redefinition for a wrapper <td> element= for an input field - - - - Skin parameters - CSS properties - - - = - - = - - controlBackgroundColor - background-color - - = - - panelBorderColor - border-color - - = - - subBorderColor - border-bottom-color - - = - - subBorderColor - border-right-color - - - -
- = - - Skin parameters redefinition for an input field - - - - Skin parameters - CSS properties - - - = - - = - - buttonSizeFont - font-size - - = - - buttonFamilyFont - font-family - - = - - -
- = - - Skin parameters redefinition for a wrapper <td> element= for spinner buttons - - - - Skin parameters - CSS properties - - - = - - = - - headerBackgroundColor - background-color - - = - - headerBackgroundColor - border-color - - = - - -
- = -
+ + headerTextColor = -
- Definition of Custom Style Classes + color + = - On the screenshot there are classes names that define styles for= component elements. + + headerWeightFont<= /entry> = -
- Style classes - - - - - -
-
- Style classes - - - - - -
-
- Style classes - - - - - - = -
-
- Style classes - - - - - - = -
- - Classes names that define an input field and a button appeara= nce + font-weight + = - - - - Class name + + +
= - Description - - + + + Skin parameters redefinition for a po= pup element during quick + month and year selection + + + + Skin parameters + CSS properties + + = - - - rich-calendar-input + = - Defines styles for an input field - + + tableBackgroundCo= lor + background + = - - rich-calendar-button + + panelBorderColor<= /entry> + border-color + = - Defines styles for a popup button - + + +
+ + Skin parameters redefinition for a sh= adow + + + + Skin parameters + CSS properties + + = - - -
+ = - - Classes names that define a days appearance + + shadowBackgroundC= olor + background-color<= /entry> + = - - - - Class name + + +
= - Description - - + + Skin parameters redefinition for a se= lected month and year + + + + Skin parameters + CSS properties + + = - + = - - rich-calendar-days + + calendarCurrentBa= ckgroundColor + background-color<= /entry> + = - Defines styles for names of working days in a header - + + calendarCurrentTe= xtColor + color + = - - rich-calendar-weekends + + +
= - Defines styles for names of weekend in a header - + + Skin parameters redefinition for a ho= vered month and year + + + + Skin parameters + CSS properties + + = - - rich-calendar-week + = - Defines styles for weeks numbers - + + panelBorderColor<= /entry> + border-color + = - - rich-calendar-today + + calendarSpecBackg= roundColor + background + = - Defines styles for cell with a current date - + + +
= - - rich-calendar-cell + + Skin parameters redefinition for a mo= nth items near split line + + + + Skin parameters + CSS properties + + + + + panelBorderColor<= /entry> + border-right-colo= r + + + +
= - Defines styles for cells with days - + + Skin parameters redefinition for a ho= vered toolbar items + + + + Skin parameters + CSS properties + + = - - rich-calendar-holly + = - Defines styles for holiday - + + calendarWeekBackg= roundColor + background-color<= /entry> + = - - rich-calendar-select + + generalTextColor<= /entry> + color + = - Defines styles for a selected day - + + tableBackgroundCo= lor + border-color + = - - rich-calendar-hover + + panelBorderColor<= /entry> + border-right-colo= r + = - Defines styles for a hovered day - + + panelBorderColor<= /entry> + border-bottom-col= or + = - - -
+ + + = - - Classes names that define a popup element +
+ Skin parameters redefinition for a pr= essed toolbar items + + + + Skin parameters + CSS properties + + = - - - - Class name + = - Description - - + + panelBorderColor<= /entry> + border-color + = - - - rich-calendar-popup + + tableBackgroundCo= lor + border-right-colo= r + = - Defines styles for a popup element - - - rich-calendar-exterior + + tableBackgroundCo= lor + border-bottom-col= or + = - Defines styles for a popup element exterior - + + +
= - - rich-calendar-tool + + Skin parameters redefinition for &quo= t;ok" and + "cancel" buttons + + + + Skin parameters + CSS properties + + = - Defines styles for toolbars - + = - - rich-calendar-month + + additionalBackgro= undColor + background + = - Defines styles for names of months - + + panelBorderColor<= /entry> + border-top-color<= /entry> + = - - rich-calendar-header-optional + + +
= - Defines styles for an optional header - + = - - rich-calendar-footer-optional + + Skin parameters redefinition for a po= pup element during time + selection + + + + Skin parameters + CSS properties + + = - Defines styles for an optional footer - + = - - rich-calendar-header + + additionalBackgro= undColor + background + = - Defines styles for a header - + + panelBorderColor<= /entry> + border-color + = - - rich-calendar-footer + + +
= - Defines styles for a footer - + + Skin parameters redefinition for a wr= apper <td> + element for an input field + + + + Skin parameters + CSS properties + + = - - rich-calendar-boundary-dates + = - Defines styles for an active boundary button - + + controlBackground= Color + background-color<= /entry> + = - - rich-calendar-btn + + panelBorderColor<= /entry> + border-color + = - Defines styles for an inactive boundary date - + + subBorderColor + border-bottom-col= or + = - - rich-calendar-toolfooter + + subBorderColor + border-right-colo= r + + + +
= - Defines styles for a today control date - + + Skin parameters redefinition for an i= nput field + + + + Skin parameters + CSS properties + + = - - -
+ = - - Classes names that define a popup element during quick month = and year selection - = - - - - Class name - Description - - - = - - - rich-calendar-date-layout - Defines styles for a popup element during quick year se= lection - - - rich-calendar-editor-layout-shadow - Defines styles for a shadow - - - rich-calendar-editor-btn - Defines styles for an inactive boundary date - - - rich-calendar-date-layout-split - Defines styles for a wrapper <td> element for mon= th items near split line - - - rich-calendar-editor-btn-selected - Defines styles for an selected boundary date - - - rich-calendar-editor-btn-over - Defines styles for a boundary date when pointer was mov= ed onto - - = - - rich-calendar-editor-tool-over - Defines styles for a hovered toolbar items - - = - - rich-calendar-editor-tool-press - Defines styles for a pressed toolbar items - - = - - rich-calendar-date-layout-ok - Defines styles for a "ok" button - - - rich-calendar-date-layout-cancel - Defines styles for a "cancel" button - + + buttonSizeFont + font-size + = - - -
- = - - Classes names that define a popup element during time selecti= on - = - - - - Class name - Description - - - = - - - rich-calendar-time-layout - Defines styles for a popup element during time selectio= n - - - rich-calendar-editor-layout-shadow - Defines styles for a shadow - - - rich-calendar-time-layout-fields - Defines styles for a wrapper <td> element for inp= ut fields and buttons - - - rich-calendar-spinner-input-container - Defines styles for a wrapper <td> element for an = input field - - - rich-calendar-spinner-input - Defines styles for an input field - - - rich-calendar-spinner-buttons - Defines styles for a wrapper <td> element for spi= nner buttons - - - rich-calendar-spinner-up - Defines styles for a "up" button - - - rich-calendar-spinner-down - Defines styles for a "down" button - - - rich-calendar-time-layout-ok - Defines styles for a "ok" button - - - rich-calendar-time-layout-cancel - Defines styles for a "cancel" button - - - -
- = - In order to redefine styles for all - <rich:calendar> - components on a page using CSS, it's enough to crea= te classes with the - same names (possible classes could be found in the tables above) and define necessary properties in them. + + buttonFamilyFont<= /entry> + font-family + = - - Example: - - + + + + + Skin parameters redefinition for a wr= apper <td> + element for spinner buttons + + + + Skin parameters + CSS properties + + + + + + + headerBackgroundC= olor + background-color<= /entry> + + + + headerBackgroundC= olor + border-color + + + + +
+ +
+ +
+ Definition of Custom Style Classes + + On the screenshot there are classes names that d= efine styles for component + elements. + +
+ Style classes + + + + + +
+
+ Style classes + + + + + +
+
+ Style classes + + + + + + +
+
+ Style classes + + + + + + +
+ + Classes names that define an input fi= eld and a button + appearance + + + + + Class name + + Description + + + + + + rich-calendar-inp= ut + + Defines styles fo= r an input + field + + + + rich-calendar-but= ton + + Defines styles fo= r a popup + button + + + + +
+ + + Classes names that define a days appe= arance + + + + + Class name + + Description + + + + + + + rich-calendar-day= s + + Defines styles fo= r names of + working days in a + header + + + + rich-calendar-wee= kends + + Defines styles fo= r names of + weekend in a header + + + + rich-calendar-wee= k + + Defines styles fo= r weeks + numbers + + + + rich-calendar-tod= ay + + Defines styles fo= r cell with a + current date + + + + rich-calendar-cel= l + + Defines styles fo= r cells with + days + + + + rich-calendar-hol= ly + + Defines styles for + holiday + + + + rich-calendar-sel= ect + + Defines styles fo= r a selected + day + + + + rich-calendar-hov= er + + Defines styles fo= r a hovered + day + + + + +
+ + + Classes names that define a popup ele= ment + + + + + Class name + + Description + + + + + + rich-calendar-pop= up + + Defines styles fo= r a popup + element + + + rich-calendar-ext= erior + + Defines styles fo= r a popup + element exterior + + + + rich-calendar-too= l + + Defines styles for + toolbars + + + + rich-calendar-mon= th + + Defines styles fo= r names of + months + + + + rich-calendar-hea= der-optional + + Defines styles fo= r an optional + header + + + + rich-calendar-foo= ter-optional + + Defines styles fo= r an optional + footer + + + + rich-calendar-hea= der + + Defines styles fo= r a + header + + + + rich-calendar-foo= ter + + Defines styles fo= r a + footer + + + + rich-calendar-bou= ndary-dates + + Defines styles fo= r an active + boundary button + + + + rich-calendar-btn= + + Defines styles fo= r an inactive + boundary date + + + + rich-calendar-too= lfooter + + Defines styles fo= r a today + control date + + + + +
+ + + Classes names that define a popup ele= ment during quick month + and year selection + + + + + Class name + Description + + + + + + rich-calendar-dat= e-layout + Defines styles fo= r a popup + element during quick year + selection + + + rich-calendar-edi= tor-layout-shadow + Defines styles fo= r a + shadow + + + rich-calendar-edi= tor-btn + Defines styles fo= r an inactive + boundary date + + + rich-calendar-dat= e-layout-split + Defines styles fo= r a wrapper + <td> element for + month items near split + line + + + rich-calendar-edi= tor-btn-selected + Defines styles fo= r an selected + boundary date + + + rich-calendar-edi= tor-btn-over + Defines styles fo= r a boundary + date when pointer was mo= ved + onto + + + + rich-calendar-edi= tor-tool-over + Defines styles fo= r a hovered + toolbar items + + + + rich-calendar-edi= tor-tool-press + Defines styles fo= r a pressed + toolbar items + + + + rich-calendar-dat= e-layout-ok + Defines styles fo= r a + "ok" + button + + + rich-calendar-dat= e-layout-cancel + Defines styles fo= r a + "cancel" + button + + + + +
+ + + Classes names that define a popup ele= ment during time selection + + + + + Class name + Description + + + + + + rich-calendar-tim= e-layout + Defines styles fo= r a popup + element during time + selection + + + rich-calendar-edi= tor-layout-shadow + Defines styles fo= r a + shadow + + + rich-calendar-tim= e-layout-fields + Defines styles fo= r a wrapper + <td> element for + input fields and + buttons + + + rich-calendar-spi= nner-input-container + Defines styles fo= r a wrapper + <td> element for + an input field + + + rich-calendar-spi= nner-input + Defines styles fo= r an input + field + + + rich-calendar-spi= nner-buttons + Defines styles fo= r a wrapper + <td> element for + spinner buttons + + + rich-calendar-spi= nner-up + Defines styles fo= r a + "up" + button + + + rich-calendar-spi= nner-down + Defines styles fo= r a + "down" + button + + + rich-calendar-tim= e-layout-ok + Defines styles fo= r a + "ok" + button + + + rich-calendar-tim= e-layout-cancel + Defines styles fo= r a + "cancel" + button + + + +
+ + In order to redefine styles for all + <rich:calendar> + components on a page using CSS, = it's enough to + create classes with the same names (possible= classes could be found in + the tables above<= /link>) and define necessary + properties in them. + + + Example: + + = - = - This is a result: - = -
- Redefinition styles with predefined classes - - - - - -
- = - In the example an active cell background color was changed. - = - Also it's possible to change styles of particular <rich:calendar> component. In= this case you should create own style classes and use them in correspondin= g <rich:calendar> <= property>styleClass attributes. An example is placed = below: - = - - Example: - - + + This is a result: + +
+ Redefinition styles with predefined c= lasses + + + + + +
+ + In the example an active cell background color w= as changed. + + Also it's possible to change styles of part= icular + <rich:calendar> + component. In this case you shou= ld create own style + classes and use them in corresponding + <rich:calendar> + + + styleClass + attributes. An example is placed= below: + + + Example: + + = - The "inputClass" attribute for <rich:calendar> is defined a= s it's shown in the example below: - = - - Example: - - -]]> = - = - This is a result: - = -
- Redefinition styles with own classes and <emphasis><property>= styleClass</property></emphasis> attributes - - - - - -
= - = - As it could be seen on the picture above, the font style for out= put text was changed. - = - = -
+...]]> + The + "inputClass" + attribute for + <rich:calendar> + is defined as it's shown in= the example below: = -
- Relevant Resources Links - Here you can see the example of - <rich:calendar> - usage and sources for the given example. - How to use JavaScript API see on the RichFaces Users Forum. -
+ + Example: + + +]]> = + This is a result: + +
+ Redefinition styles with own classes = and <emphasis> + <property>styleClass</pr= operty> + </emphasis> attributes + + + + + +
+ + As it could be seen on the picture above, the fo= nt style for output text + was changed. + + +
+ +
+ Relevant Resources Links + Here you can see the exam= ple of + <rich:calendar> + usage and sources for the given = example. + How to use JavaScript API see on the RichFaces Users Forum. +
+
--===============6318602347888085269==--