ZK Component Reference/Input/Calendar

Calendar

• Demonstration: Calendar
• Java API: Calendar
• JavaScript API: Calendar
• Style Guide: 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 org.zkoss.web.preferred.2DigitYearStart for details.

Constraint

since 8.5.2

This component also supports constraint like ZK Component Reference/Input/Datebox#Constraint

Supported Events

Name	Event Type
onWeekClick	Denotes a user clicks upon a label of week of year. [ZK EE]

• 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