Calendar

From Documentation
Revision as of 04:15, 11 August 2020 by Rudyhuang (talk | contribs) (Calendar a11y)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Calendar

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

Required Settings

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.

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]