Calendar |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Developer’s Guide Home
Installation and Configuration Common Concepts Components Index Border Layout Panel Calendar Chart Command Button Command Link Composite Filter Confirmation Data Table Date Chooser Day Table Drop Down Field Dynamic Image Folding Panel For Each Graphic Text Hint Label Input Text Input Textarea Layered Pane Level Indicator Popup Layer Popup Menu Select Boolean Checkbox Select Many Checkbox Select One Radio Spinner Suggestion Field Tabbed Pane Tab Set Tree Table Two List Selection Window Focus Load Bundle Scroll Position Ajax Framework Validation Framework Tag Reference API Reference |
Key FeaturesCreating the CalendarTo add the Calendar component to the page, use the <o:calendar> tag. This tag has the value attribute that controls a currently selected date. The attribute must be specified as a value-binding expression that references a java.util.Date instance. The following example shows a definition of the Calendar with the value attribute. <o:calendar value="#{CalendarBean.selectedDate}" />
Like the JSF UIInput component, the Calendar supports the validator, required, immediate and disabled attributes. For more details about these attributes, see JavaServer Faces specification (section "EditableValueHolder"). Calendar component supports the timeZone attribute that can be used to specify the time zone in which to interpret the time information in the date. <o:calendar value="#{CalendarBean.selectedDate}" timeZone="#{CalendarBean.timeZone}"/> You can also specify the timeZone attribute as a String that is a timezone ID as described in the javadocs for java.util.TimeZone.getTimeZone(). <o:calendar value="#{CalendarBean.selectedDate}" timeZone="GMT"/> Please note that when the Calendar's value is saved on the server, the selected date is used and time is set to 00:00:00 in the time zone specified with the timeZone attribute(the server time zone is used by default). Customizing the AppearanceThe first day of the week, which is used by the Calendar component to arrange days by weeks, is specified by the firstDayOfWeek attribute. It can take the values from "1" (Sunday) to "7" (Saturday). By default, the first day of the week is Sunday. The labels for the Today and None buttons can be customized with the todayText and noneText string attributes. In addition, you can specify whether to show the Calendar's footer by using a boolean showFooter attribute. By default, it is set to "true". The following example shows the use of the above attributes: <o:calendar locale="#{CalendarBean.selectedLocale}" todayText="#{CalendarBean.currentTodayText}" noneText="#{CalendarBean.currentNoneText}" />
The date ranges are defined within the <o:dateRanges> tag. You can specify the actual ranges using:
In this case, you must specify the value attribute as a value-binding expression that references a collection of org.openfaces.component.calendar.SimpleDateRange instances. Using the properties of this class (see the table below), you can set the start and end dates of the range and define the look of date ranges in the normal and rollover states.
In this case, to delimit date ranges and specify their styles, use the attributes of the <o:simpleDateRange> tag, which correspond exactly to the properties of the SimpleDateRange class:
Note that you can combine the value attribute and <o:simpleDateRange> tag(s) of the <o:dateRanges> tag to create date ranges. If you want to apply one and the same style to all the date ranges (in the normal and rollover states) in the Calendar component, use the dayStyle and rolloverDayStyle attributes of the <o:dateRanges> tag. You can customize a style for a selected date, both in the normal and rollover states, using the following attributes of the <o:dateRanges> and <o:simpleDateRange> tags:
Additionally, the <o:dateRanges> tag provides attributes to define disabled days within and outside date ranges. Disabled dates cannot be selected by the user.
In the example below, date ranges are defined by the value attribute. The ranges are styled and days outside them are enabled: <o:calendar> <o:dateRanges value="#{DateManager.myRanges}" dayStyle="background: green; color: yellow;" rolloverDayStyle="background: yellow; color: green;" disableExcludes="false"/> </o:calendar> The following example shows date ranges defined by the <o:simpleDateRange> tag. The ranges have different styles applied. <o:calendar value="#{DateManager.introductionFromDate}" selectedDayStyle="color: #0033CC; background: #00CCFF;"> <o:dateRanges> <o:simpleDateRange fromDate="#{CalendarBean.introductionFromDate}" toDate="#{CalendarBean.introductionToDate}" dayStyle="color: #0033CC; background: #00CCFF;"/> <o:simpleDateRange fromDate="#{CalendarBean.lecturesFromDate}" toDate="#{CalendarBean.lecturesToDate}" dayStyle="color: #006600; background: #ADE9CB;"/> <o:simpleDateRange fromDate="#{CalendarBean.practiceFromDate}" toDate="#{CalendarBean.practiceToDate}" dayStyle="color: #FF9900; background: #FFFFCC;"/> <o:simpleDateRange fromDate="#{CalendarBean.examinationFromDate}" toDate="#{CalendarBean.examinationToDate}" dayStyle="color: #CC0000; background: #FFB9B9;"/> </o:dateRanges> </o:calendar> Implementing i18n SupportThe Calendar component uses the weekday and month names obtained from the java.util.Locale specified by its locale attribute. By default, the client's locale is used, so the names of the month and weekdays are displayed in the language specified as a local language on the client. You can specify the locale attribute as a value-binding expression that references a java.util.Locale instance or as a String in "ll_CC_vv" format, where:
In the following example, French is used as a local language and France is used as a local country. <o:calendar value="#{DateManager.selectedDate}" firstDayOfWeek="1" locale="fr_FR"/> Specifying StylesDifferent parts of the Calendar component as well as individual date cells can be styled. Use the following style attributes to define how a particular part of the Calendar component will look in the normal and rollover states.
Keyboard SupportThe selected date in the Calendar component can be controlled with keyboard when it has a keyboard focus with the Left/Right/Up/Down keys to move the selection within a month and PgUp/PgDown keys to move the selection between months. The Calendar can be made non-focusable and thus not having keyboard control by assigning false to its focusable attribute. The look of Calendar in the focused state can be customized with the focusedStyle/focusedClass attributes. Client-Side EventsThe Calendar component supports following client-side events:
Server-Side Event ListenersThe Calendar component has the valueChangeListener attribute. This attribute is a method binding expression that must reference a method that accepts a javax.faces.event.ValueChangeEvent. ValueChangeListener for the Calendar component works the same way as for standard UIInput components. You can also add a value change listener to the component by using the <f:valueChangeLisneter> tag. Client-Side APIAll client-side API methods for the Calendar component are listed in the following table:
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
© 2010 TeamDev Ltd. | ![]() |