java - 如何在zk的日历中选择星期

Question

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

Answer 1

您可以覆盖 _markCal js 函数（用于标记选定日期）来设置整行样式并触发事件到服务器以更新选定日期，请参考：

在线演示

calendar_as_week_picker.zul

WeekPicker.java

和

我博客上的相关文章

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>