Calendar

since 9.5.0

CE

PE

EE

# Label a Component

To name a component with ARIA attribute by adding the aria-label client attribute to the component, please refer to zk_dev_ref/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