Calendar Component for Vaadin 8

In Vaadin 8 the Calendar is gone. There is only present as legacy component in the .v7 package. I have started a new addon with the code base from v7 package. This allows me to use native V8 with this component without the need of compatibility-deps.

get it here:!addon/calendar-add-on

Any comments and/or help are welcome

Thanks for your time and work.

Sorry to come on this again, but Vaadin framework should have a decent Calendar component, included in the core.


Hi @lugu,
how can we add an event to your calendar with vaadin 8?


((BasicItemProvider)calendar).getDataProvider.addItem( … )

or implement a CalendarEditableItemProvider to handle your items. Look at BasicItemProvider for example or the demo source at github.

In Vaadin8 this component is only in v7 compatibility package.

Super ! It’s working!
Thanks a lot for your work !

A little comment for other dev : it’s ((BasicItemProvider)calendar.getDataProvider).addItem( … )

1.0-Beta2 is out today.

Calendar items can be directly editable, resizeable or moveable.
Demo was updated to reflect the changes.

Calendar 1.0 is out.
This version is largely the same as in v7, but with fixes and small enhancements.

What’s next:
Java8 Date/Time-API

This breaks the current calendar API, so this change is in version 2.x.

Appreciate your work on that calendar component, thank you.

I have a question regarding the styling of events. I’m only interested in the monthly view of the calendar and would like an event to fill out the entire day with a particular background-color. Can this be achieved by adding a scss style to one of the items added to the eventprovider? I’ve tried but with no success so far, what selectors do I have to override at this point?

Awesome work!

currently it’s not possible to do that. I have updated the highlights on the addon page to show a solution for viewing complete item captions in monthly view. This can be adapted to a custom style of events. In the example i use :hover as trigger. This can be done by click and set a custom style.


when using the calendar in the monthly view the days are shown in full text (Monday, Tuesday etc.). This is an issue when the calendar component only has limited space available. How can I use short cuts (Mon, Tue. …) like in the demo version of the vaadin calendar

you can set the

Set it by override of String getDayNamesShort(). Same for month String


I’m new to vaadin, and i’m using eclipse to work with vaadin…

I want to know, how to use this add-on in my project? I already follow the insruction to add some line in my pom.xml file on my project. after that what should I do?

thank you for your help

I would like to add a background picture to an event, like it is done in the Dashboard Demo.
Is this already possible with the calendar addon?



i would like to know how can i color the individual cells in the calendar? I want a shared calendar where every user has his own color and every item is visible with the color of the corresponding user. I have tried to use the setStyleName on my “BasicItem” but it did nothing. It has still the same style name “state-planned”. I made my calendar like it is shown in the github demo but im kind of stuck here. Please help!


Mihály Balogh:

I have tried to use the setStyleName on my “BasicItem” but it did nothing. It has still the same style name “state-planned”.

The style “state-planned” from demo is a custom style from _custom_calendar.scss. Look here in line 90.

Claus-Peter Klas:

Is this already possible with the calendar addon?


Hi Lutz,

Thank you for addon. I have question regarding view mode: Is it possible to represent yearly view, to display only month names ? From the documentation and looking into the code currently it is not possible. Are there any plans for the future ?
In out application we have events lasting couple of years and we want to display it in short yearly view.

Thanks in advance,
Kind regards,

It’s not planned atm. We show this kind of data in a tree grid with custom styles and more special functionality in the detail.