Height of the calendar in monthly view is miscalculated when using Valo theme

Originally by elechim

Hi,

I'm using Vaadin 7.4.6 and I detected a problem with the calendar height when in monthly view.

Setting the height of the calendar ("setHeight("550px")" or "setHeight("100%")") produces the following errors:

• the last week row is not completely visible
• the numers of the weeks (on the left) are not aligned with the rows of the weeks

Setting undefined height works fine.

The problem appears only when using the Valo theme (Reindeer theme works fine).

I tested it with the following UI code:

@Override
protected void init(VaadinRequest request) {
    Calendar calendar = new Calendar();
    calendar.setLocale(Locale.ENGLISH);

    //Load events
    setCalendarContainer(calendar);
    setCalendarStartEndDate(calendar);

    calendar.setWidth("100%");

    calendar.setHeightUndefined();_OK
_  calendar.setHeight("550px");  _ERROR
_  calendar.setHeight("100%");    //ERROR

    setContent(calendar);
}

And the following custom theme file:

@import "../valo/valo.scss";
@mixin my-theme {
    @include valo;
        
    .v-calendar
    {
        border: 1px solid black;
    }
}

Imported from https://dev.vaadin.com/ issue #17954

Start by reproducing the issue with Calendar in monthly view using the supplied Vaadin UI code, a fixed or 100% height, and the custom Valo theme. Inspect the monthly calendar layout and theme styling; done means the final week is fully visible and the week numbers align with their rows while fixed, percentage, and undefined heights behave correctly.