Sizing the calendar doesn't work as described in documentation

Hello!

In the documentation concerning the Calendar (
https://vaadin.com/book/vaadin7/-/page/components.calendar.html
) and specificaly in “5.23.5. Styling a Calendar” we can read this:

The Calendar supports component sizing as usual for defined (fixed or relative) sizes.
When using an undefined size for the calendar, all the sizes come from CSS
.

In addition, when the height is undefined, a scrollbar is displayed in the weekly view

to better fit the cells to the user interface.

But I set a width and a height (via .setSizeFull() or .setWidth() and .setHeight()) to my calendar and I always have the scrollbar in my calendar… (see screenshot)

Here the code used:

public abstract class VaadinCalendarWidget extends CustomComponent {

    private final VerticalLayout mainLayout = new VerticalLayout();
    
    private final Button btnToday = new Button();
    private final Button btnAllday = new Button();
    private final Button btnWeekend = new Button();
    private final Button btnRefresh = new Button();
    private final Button btnMonthView = new Button();
    private final Button btnWeekView = new Button();
    private final Button btnDayView = new Button();
    
    private final DateField datShowDay = new PopupDateField();
    private final Calendar calendar = new Calendar();
    
    /**
     * Constructor
     */
    public VaadinCalendarWidget() {
        this.setSizeFull();
        getMainLayout().setSizeFull();
        setCompositionRoot(getMainLayout());
        getMainLayout().addComponent(getCalendar());
        
        getCalendar().setSizeFull();
        
        LocalDateTime begin = new LocalDateTime(2014, 6, 4, 14, 15);
        LocalDateTime end = new LocalDateTime(2014, 6, 4, 15, 30);
        getCalendar().addEvent(new BasicEvent("My caption", "An awesome description!", begin.toDate(), end.toDate()));
        getCalendar().addEvent(new BasicEvent("My caption 2", "An awesome description 2!", begin.toDate(), end.toDate()));
        
        getCalendar().setHandler(new EventClickHandler() {
            public void eventClick(EventClick event) {
                BasicEvent e = (BasicEvent) event.getCalendarEvent();
                // Do something with it
                new Notification("Event clicked: " + e.getCaption(),
                    e.getDescription()).show(Page.getCurrent());
            }
        });
        
        getCalendar().setHandler(new RangeSelectHandler() {
            
            @Override
            public void rangeSelect(RangeSelectEvent event) {
                Notification.show(event.getStart().toString()+ " " + event.getEnd().toString());
            }
        });
        
        getCalendar().setImmediate(true);
    }

    /**
     * @return the mainLayout
     */
    protected VerticalLayout getMainLayout() {
        return this.mainLayout;
    }
    
    /**
     * @return the btnToday
     */
    protected Button getBtnToday() {
        return this.btnToday;
    }

    /**
     * @return the btnAllday
     */
    protected Button getBtnAllday() {
        return this.btnAllday;
    }

    /**
     * @return the btnWeekend
     */
    protected Button getBtnWeekend() {
        return this.btnWeekend;
    }
    
    /**
     * @return the btnRefresh
     */
    protected Button getBtnRefresh() {
        return this.btnRefresh;
    }

    /**
     * @return the btnMonthView
     */
    protected Button getBtnMonthView() {
        return this.btnMonthView;
    }

    /**
     * @return the btnWeekView
     */
    protected Button getBtnWeekView() {
        return this.btnWeekView;
    }

    /**
     * @return the btnDayView
     */
    protected Button getBtnDayView() {
        return this.btnDayView;
    }

    /**
     * @return the datShowDay
     */
    protected DateField getDatShowDay() {
        return this.datShowDay;
    }

    /**
     * @return the calendar
     */
    protected Calendar getCalendar() {
        return this.calendar;
    }
    
}

Where is my mistake?

14205.png

Into what layout are you adding your VaadinCalendarWidget?

From the screenshot it looks like you are adding it to a VerticalLayout which is not full size.

Yes indeed, it is inside a VerticalLayout. I just add .setSizeFull() to this object but nothing changes. Do I need to use an another layout?

Same problem afert upgrading to vaadin 7.1.15 with the Calendar widget in vaadin

Did anyone figure out this problem? I know this is two years old but I am experiencing now.

Maybee its the sizable interface. i have tried using the setSize(UNIT_PERCENT) but it dosent work and tells me to use UNITS_PERCENT which is depreciated, even though I imported com.vaadin.server.Sizeable.Unit.

Any ideas?