Calendar"
From Documentation
RebeccaLai (talk | contribs) (→Keyboard Support: ZK-5516 and ZK-5517) |
|||
| (One intermediate revision by one other user not shown) | |||
| Line 4: | Line 4: | ||
== Keyboard Support == | == Keyboard Support == | ||
| − | {| | + | {| class='wikitable' |
! <center>Key</center> | ! <center>Key</center> | ||
! <center>Description</center> | ! <center>Description</center> | ||
| Line 13: | 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:
-
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
| 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]