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类中的任何更改都将应用于所有日历，这对我来说不是goo因为我需要显示第一个日历的时间栏...

要测试更改以下css类，如下所示：

＆＃13;

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

＆＃13;

我花了一些时间来研究Vaadin代码。 我的结论是，这种自定义不是预期的，您必须使用日历ASIS 。扩展代码非常复杂，因为时间栏（Timebar）是com.vaadin.client.ui.calendar.schedule.WeekGrid中的内部类，重写此客户端代价会很昂贵......

有关其他信息，请阅读以下文章：

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

Answer 2

最后，我成功地建立了一个基于Vaadin 7扩展机制的解决方案。 Java扩展操作默认生成的DOM，并根据我想要的显示删除，修改或添加css类...

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

enter image description here

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

我的代码的主要部分是Connector类，它进行DOM转换：

@Connect（CalendarExtension.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);
    }
}

}

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

祝你好运

Vaadin日历的隐藏小时轴

2 个答案: