如何在zk中选择日历中的一周

Question

如何在Calendar组件的onclick上选择日历中的整周。就像这张图片一样。

Answer 1

您可以覆盖_markCal js函数（用于标记所选日期）以将整行和fire事件设置为服务器以更新所选日期，请参阅：

online demo

calendar_as_week_picker.zul

WeekPicker.java

和

related article at my blog

Answer 2

对于zk的版本7，请使用：

<zk xmlns:w="client">
<style>
    .custom-selected-node {
        background-color: #99FF99 !important;
    }
</style>
<vlayout>
    <label value="selected dates" />
    <textbox rows="7" id="tbx" width="300px" />
</vlayout>
<calendar id="cal" use="test.custom.component.WeekPicker">
    <attribute w:name="_markCal"><![CDATA[
        function (opts) {
            // clear old custom-selected-node
            jq('.custom-selected-node').each(function () {
                jq(this).removeClass('custom-selected-node');
            });
            this.$_markCal(opts);
            if (this._view == 'day') {
                // target: current focused date (td)
                // parent: tr
                var target = jq('.z-calendar-selected')[0],
                    parent = target.parentNode,
                    node = parent.firstChild,
                    beforeCnt = 0,
                    found;
                // loop through each td
                while (node) {
                    // add selected style
                    jq(node).addClass('custom-selected-node');
                    if (node == target) {
                        found = true;
                    } else if (!found) {
                        // count nodes before target
                        beforeCnt++;
                    }
                    node = node.nextSibling;
                }
                // fire event to server
                this.fire('onCustomSelect', {bcnt: beforeCnt});
            }
        }
    ]]></attribute>
    <attribute name="onCustomSelect"><![CDATA[
        List dates = self.getSelectedDates();
        java.text.SimpleDateFormat sdf = new java.text.SimpleDateFormat("dd / MM / yyyy");
        String value = "";
        for (int i = 0; i < dates.size(); i++) {
            value = value + sdf.format((Date)dates.get(i)) + "\n";
        }
        tbx.setValue(value);
    ]]></attribute>
</calendar>