Calendar"

From Documentation
(Calendar a11y)
 
(→‎Keyboard Support: ZK-5516 and ZK-5517)
 
(3 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{ZKComponentReferencePageHeader}}
 
{{ZKComponentReferencePageHeader}}
 
+
{{versionSince|9.5.0}} {{ZK EE}}
= Calendar =
 
{{ZKComponentReferenceAccessibilityComponentInfo}}
 
 
 
  since 9.5.0
 
 
 
== Required Settings ==
 
 
{{ZKComponentReferenceAccessibilityNamingReference}}
 
{{ZKComponentReferenceAccessibilityNamingReference}}
  
 
== Keyboard Support ==
 
== Keyboard Support ==
{| border="1px"
+
{| class='wikitable'
 
! <center>Key</center>
 
! <center>Key</center>
 
! <center>Description</center>
 
! <center>Description</center>
Line 19: Line 13:
 
| Enter / Spacebar
 
| Enter / Spacebar
 
| Select the date.
 
| Select the date.
 +
|-
 +
| PageUp / PageDown
 +
| {{versionSince|10.0.0}} Navigate the month.
 +
|-
 +
| Shift+PageUp / Shift+PageDown
 +
| {{versionSince|10.0.0}} Navigate the year.
 
|}
 
|}
  

Latest revision as of 07:17, 23 February 2024

Since 9.5.0

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion ee.png

Label a Component

To name a component with ARIA attribute by adding the aria-label client attribute to the component, please refer to ZK_Developer's_Reference/Accessibility#Specify_ARIA_Attributes

Keyboard Support

Key
Description
ArrowUp / ArrowDown / ArrowLeft / ArrowRight Navigate the date.
Enter / Spacebar Select the date.
PageUp / PageDown Since 10.0.0 Navigate the month.
Shift+PageUp / Shift+PageDown Since 10.0.0 Navigate the year.

Calendar Day AriaLabel Renderer

This is achieved by overriding the default renderer at the client to customize the aria-label of days on ZK's Calendar.

<zk>
	<script><![CDATA[
		zk.afterLoad('zul.db', function(){
			zul.db.Renderer.cellAriaLabel = function (cal, y, m, day, monthofs, dayofweek) {
				var localizedSymbols = cal.getLocalizedSymbols();
				return day + ' ' + localizedSymbols.FMON[m] + ', ' + y; // dd MMMM, yyyy
			};
		});
	]]></script>
	<calendar/>
</zk>
[Since 9.5.0]