隐藏 Vaadin 日历的小时轴

Question

我需要在 HorizentalLayout 的视图中显示多个日历。由于日历相互绑定，我只想显示左侧第一个日历的小时轴。

可能吗？

更新：这是我的代码的当前版本。这很简单，只需在固定循环中创建日历...代码在我视图的构造函数中

private List<Calendar> listOfCals = new ArrayList<>();

public PostageViewAsManyCalendars() {

    root.setMargin(true);

    int hour = 6;
    for (int i = 0; i < 10; i++) {
        Calendar cal = new Calendar("My Calendar");
        cal.setWidth("150px");
        cal.setHeight("400px");
        listOfCals.add(cal);

        cal.setStartDate(new GregorianCalendar(2012, 1, 14, 00, 00).getTime());
        cal.setEndDate(new GregorianCalendar(2012, 1, 14, 23, 59).getTime());

        // Use a container of built-in BasicEvents
        final BeanItemContainer<BasicEvent> container = new BeanItemContainer<BasicEvent>(BasicEvent.class);

        // Create a meeting in the container
        container.addBean(
                new BasicEvent("The Event", "Single Event", new GregorianCalendar(2012, 1, 14, hour, 00).getTime(),
                        new GregorianCalendar(2012, 1, hour + 3, 14, 00).getTime()));

        // The container must be ordered by the start time. You
        // have to sort the BIC every time after you have added
        // or modified events.
        container.sort(new Object[] { "start" }, new boolean[] { true });
        cal.setContainerDataSource(container, "caption", "description", "start", "end", "styleName");

        root.addComponent(cal);
        hour++;
    }

    this.setCompositionRoot(root);
}

我想隐藏的是轴小时，如下所示：

enter image description here

Answer 1

基于 css 变化的技术是不够的。 css class 中的任何更改都将应用于所有日历，这对我来说不太好，因为我需要显示第一个日历的时间栏...

要测试更改以下 css class 如下：

.v-calendar-times {
    width: 0px;
    font-size: 0.77em;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden; 
    color:transparent;    
}

我花了一些时间查看 Vaadin 代码。 我的结论是这种自定义是不可取的，你必须使用日历 ASIS。扩展代码相当复杂，因为时间栏（Timebar）是com.vaadin.client.ui.calendar.schedule.WeekGrid里面的一个内class，重写这个客户端会很昂贵...

有关更多信息，请阅读此 post：

https://vaadin.com/forum#!/thread/10491292

Answer 2

我终于成功地提出了基于Vaadin 7 扩展机制的解决方案。 Java扩展操作默认生成的DOM，根据我想要的显示删除、修改或添加cssclasses...

最后我得到以下视图，在此示例中有 4 个日历：

enter image description here

有关 Vaadin 7 扩展的更多信息： enter link description here

我的代码的主要部分是连接器 class，它进行 DOM 转换：

@Connect(CalendarExtension.class) public class CalendarExtensionConnector 扩展了 AbstractExtensionConnector {

private static final long serialVersionUID = -8722803624865597642L;

private VCalendar vcalendar;

/*
 * (non-Javadoc)
 * @see com.vaadin.client.extensions.AbstractExtensionConnector#extend(com.vaadin.client.ServerConnector)
 */
@Override
protected void extend(ServerConnector target) {

    vcalendar = (VCalendar) ((ComponentConnector) target).getWidget();

    // I have tested many other handlers but does not work : AttachEvent.Handler, LoadHandler, InitializeHandler,
    // OpenHandler, ValueChangeHandler

    // weekGrid is a property in VCalendar, and it contains the famous TimeBar !
    target.addStateChangeHandler("weekGrid", new StateChangeEvent.StateChangeHandler() {
        private static final long serialVersionUID = -8439729365677484553L;

        @Override
        public void onStateChanged(StateChangeEvent stateChangeEvent) {
            Scheduler.get().scheduleDeferred(new ScheduledCommand() {
                @Override
                public void execute() {
                    Element element = vcalendar.getElement();

                    // add css classes
                    addClassName(element, getState().cssClasses2Add);

                    // set exact properties
                    setExactProperties4ExactClassName(element, getState().exactStyleProperties);

                    // remove elements
                    removeChildrenByClassName(element, getState().cssClasses4Remove);

                }

            });
        }
    });

}

/**
 * @param element
 * @param extProperties
 */
private void setExactProperties4ExactClassName(Element element, List<String> extProperties) {
    for (String prop : extProperties) {
        String[] props = prop.split(",");
        String class2Search = props[0];
        String propertyName = props[1];
        String propertyValue = props[2];
        List<Element> exacts = DomUtils.findElementsByExactClass(element, class2Search);
        if (exacts != null) {
            for (Element exa : exacts) {
                exa.getStyle().setProperty(propertyName, propertyValue);
            }
        }
    }
}

private void addClassName(Element element, List<String> cssClasses2Add) {
    for (String prop : cssClasses2Add) {
        String[] props = prop.split(",");
        String class2Search = props[0];
        String class2Add = props[1];

        List<Element> exacts = DomUtils.findElementsByExactClass(element, class2Search);
        if (exacts != null) {
            for (Element exa : exacts) {
                exa.addClassName(class2Add);
            }
        }
    }
}

/**
 * @param element
 * @param className
 */
private void removeChildrenByClassName(Element element, String... classNames) {
    List<Element> items = DomUtils.findElementsForClass(element, classNames);
    if ((items != null) && (items.size() > 0)) {
        for (Element element2 : items) {
            element2.removeFromParent();
        }
    }
}

/*
 * (non-Javadoc)
 * @see com.vaadin.server.AbstractClientConnector#getState()
 */
@Override
public CalendarExtensionState getState() {
    return (CalendarExtensionState) super.getState();
}

}

我的 DomUtils 我很简单 :

public class DomUtils {

public static List findElementsForClass(Element element, String... classNames) {
    ArrayList result = new ArrayList();
    recElementsForClass(result, element, classNames);
    return result;
}

private static void recElementsForClass(ArrayList res, Element element, String... classNames) {
    String c;

    if (element == null) {
        return;
    }

    c = DOM.getAttribute(element, "className");

    if (c != null) {
        String[] p = c.split(" ");

        for (String element2 : p) {
            for (String className : classNames) {
                if (element2.equals(className)) {
                    res.add(element);
                }
            }
        }
    }

    for (int i = 0; i < DOM.getChildCount(element); i++) {
        Element child = DOM.getChild(element, i);
        recElementsForClass(res, child, classNames);
    }
}

public static List findElementsByExactClass(Element element, String className) {
    ArrayList result = new ArrayList();
    recElementsForExactClass(result, element, className);
    return result;
}

private static void recElementsForExactClass(ArrayList res, Element element, String className) {
    String c;

    if (element == null) {
        return;
    }

    c = DOM.getAttribute(element, "className");

    if (c != null) {
        if (c.equals(className)) {
            res.add(element);
        }
    }

    for (int i = 0; i < DOM.getChildCount(element); i++) {
        Element child = DOM.getChild(element, i);
        recElementsForExactClass(res, child, className);
    }
}

}

要在连接器和服务器端之间共享数据 class (CalendarExtension)，您需要自定义共享状态。请查看 vaadin wiki。在我的例子中，它是 CalendarExtensionState class...

祝你好运

隐藏 Vaadin 日历的小时轴

Hiding hours axis for a Vaadin calendar

java

calendar

vaadin