Calendar"
Jumperchen (talk | contribs) |
|||
(18 intermediate revisions by 7 users not shown) | |||
Line 6: | Line 6: | ||
*Java API: <javadoc>org.zkoss.zul.Calendar</javadoc> | *Java API: <javadoc>org.zkoss.zul.Calendar</javadoc> | ||
*JavaScript API: <javadoc directory="jsdoc">zul.db.Calendar</javadoc> | *JavaScript API: <javadoc directory="jsdoc">zul.db.Calendar</javadoc> | ||
− | *Style Guide: [ | + | *Style Guide: [[ZK_Style_Guide/XUL_Component_Specification/Calendar| Calendar]] |
= Employment/Purpose = | = Employment/Purpose = | ||
Line 13: | Line 13: | ||
The first day of the week is decided by the locale (actually the return value of the <tt>getFirstDayOfWeek</tt> method in the <tt>java.util.Calendar</tt>). | The first day of the week is decided by the locale (actually the return value of the <tt>getFirstDayOfWeek</tt> method in the <tt>java.util.Calendar</tt>). | ||
− | Since 5.0.3, you can control the first day of the week by use of the session attribute and the library property. Please refer to [ | + | Since 5.0.3, you can control the first day of the week by the use of the session attribute and the library property. Please refer to [[ZK_Developer%27s_Reference/Internationalization/The_First_Day_of_the_Week|The First Day of the Week]] for details. |
= Customization = | = Customization = | ||
Line 23: | Line 23: | ||
<source lang="xml" > | <source lang="xml" > | ||
− | |||
<calendar id="cal" onChange="in.value = cal.value"/> | <calendar id="cal" onChange="in.value = cal.value"/> | ||
<datebox id="in" onChange="cal.value = in.value"/> | <datebox id="in" onChange="cal.value = in.value"/> | ||
− | |||
</source> | </source> | ||
+ | |||
+ | == Date Range Selector == | ||
+ | |||
+ | [[File:dateRangeSelector.png | center]] | ||
+ | |||
+ | Check [https://github.com/zkoss/zkbooks/blob/master/componentreference/src/main/webapp/input/calendar.zul#L21 calendar.zul] | ||
+ | |||
+ | =Calendar Day Renderer= | ||
+ | This is achieved by overriding the default renderer at the client to customize the appearance of days on ZK's Calendar. | ||
+ | For example, | ||
+ | |||
+ | [[Image:ZKComRef_Calendar_Example2.png]] | ||
+ | <source lang="xml"> | ||
+ | <zk> | ||
+ | <script><![CDATA[ | ||
+ | zk.afterLoad('zul.db', function(){ | ||
+ | zul.db.Renderer.cellHTML = function (cal, y, m, day, monthofs) { | ||
+ | return '<a href="javascript:;" style="color:red;">' + day + '</a>'; | ||
+ | }; | ||
+ | }); | ||
+ | ]]></script> | ||
+ | <calendar/> | ||
+ | </zk> | ||
+ | </source> | ||
+ | [Since 5.0.3] | ||
+ | |||
+ | = Show Week Number = | ||
+ | Calendar supports to show a week number of the year. | ||
+ | {{ZK EE}} | ||
+ | [Since 6.5.0] | ||
+ | |||
+ | [[Image:ZKComRef_Calendar_Week_Of_Year.PNG]] | ||
+ | |||
+ | <source lang="xml"> | ||
+ | <calendar weekOfYear="true" /> | ||
+ | </source> | ||
+ | |||
+ | = 2DigitYearStart = | ||
+ | |||
+ | Since 8.6.2, you can control the 2DigitYearStart by the use of the library property. Please refer to [[https://www.zkoss.org/wiki/ZK_Configuration_Reference/zk.xml/The_Library_Properties/org.zkoss.web.preferred.2DigitYearStart]] for details. | ||
+ | |||
+ | = Constraint = | ||
+ | since 8.5.2 | ||
+ | This component also supports <tt>constraint</tt> like [[ZK Component Reference/Input/Datebox#Constraint]] | ||
=Supported Events= | =Supported Events= | ||
Line 55: | Line 97: | ||
=Version History= | =Version History= | ||
− | + | {{LastUpdated}} | |
{| border='1px' | width="100%" | {| border='1px' | width="100%" | ||
! Version !! Date !! Content | ! Version !! Date !! Content | ||
+ | |- | ||
+ | | 5.0.3 | ||
+ | | June, 2010 | ||
+ | | Calendar Day Renderer | ||
|- | |- | ||
| 5.0.3 | | 5.0.3 | ||
| July, 2010 | | July, 2010 | ||
− | | An application can control the first day of the week by use of the session attribute and the library property. Please refer to [ | + | | An application can control the first day of the week by use of the session attribute and the library property. Please refer to [[ZK_Developer%27s_Reference/Internationalization/The_First_Day_of_the_Week|The First Day of the Week]] for details. |
+ | |- | ||
+ | | 5.0.4 | ||
+ | | August, 2010 | ||
+ | | Calendar supports moving to next/prev mon by mouse scrolling. | ||
+ | |- | ||
+ | | 6.5.0 | ||
+ | | June, 2012 | ||
+ | | [http://tracker.zkoss.org/browse/ZK-1175 ZK-1175]: Calendar support show week number | ||
|} | |} | ||
{{ZKComponentReferencePageFooter}} | {{ZKComponentReferencePageFooter}} |
Revision as of 03:06, 22 May 2019
Calendar
Employment/Purpose
A calendar displays a 'flat' calendar and allows user to select a day from it.
The first day of the week is decided by the locale (actually the return value of the getFirstDayOfWeek method in the java.util.Calendar).
Since 5.0.3, you can control the first day of the week by the use of the session attribute and the library property. Please refer to The First Day of the Week for details.
Customization
Since 5.0.3, the rendering of the calendar can be customized at the client by providing JavaScript code that overrides Renderer.
Example
<calendar id="cal" onChange="in.value = cal.value"/>
<datebox id="in" onChange="cal.value = in.value"/>
Date Range Selector
Check calendar.zul
Calendar Day Renderer
This is achieved by overriding the default renderer at the client to customize the appearance of days on ZK's Calendar. For example,
<zk>
<script><![CDATA[
zk.afterLoad('zul.db', function(){
zul.db.Renderer.cellHTML = function (cal, y, m, day, monthofs) {
return '<a href="javascript:;" style="color:red;">' + day + '</a>';
};
});
]]></script>
<calendar/>
</zk>
[Since 5.0.3]
Show Week Number
Calendar supports to show a week number of the year.
- Available for ZK:
[Since 6.5.0]
<calendar weekOfYear="true" />
2DigitYearStart
Since 8.6.2, you can control the 2DigitYearStart by the use of the library property. Please refer to [[1]] for details.
Constraint
since 8.5.2
This component also supports constraint like ZK Component Reference/Input/Datebox#Constraint
Supported Events
None | None |
- Inherited Supported Events: XulElement
Supported Children
*NONE
Use Cases
Version | Description | Example Location |
---|---|---|
Version History
Version | Date | Content |
---|---|---|
5.0.3 | June, 2010 | Calendar Day Renderer |
5.0.3 | July, 2010 | An application can control the first day of the week by use of the session attribute and the library property. Please refer to The First Day of the Week for details. |
5.0.4 | August, 2010 | Calendar supports moving to next/prev mon by mouse scrolling. |
6.5.0 | June, 2012 | ZK-1175: Calendar support show week number |