Skip to content

Year Month Calendar

A Vaadin Flow add-on that displays a full-year or single-month calendar with server-side control over per-date styling and date selection.

Overview

Use the Year Month Calendar add-on when you need an at-a-glance calendar view of an entire year or an individual month inside a Vaadin application, rather than a single-date picker. It is well suited for highlighting special dates — holidays, weekends, deadlines, availability — through a Java-side class-name generator, and for reacting to user date selection through listeners. The package also bundles a YearMonthField value component and extended/inline date pickers for month-year input scenarios.

Features

  • Full-year calendar view (YearCalendar) and single-month calendar view (MonthCalendar).
  • Java API for applying CSS class names to specific dates through a per-date generator (ValueProvider<LocalDate, String>); supports multiple space-separated classes, or null for none.
  • Date selection listener (addDateSelectedListener).
  • Year change listener on the year view (addYearChangedListener).
  • Read-only mode.
  • Internationalization through DatePickerI18n (setI18n).
  • YearMonthField — a value-bound field for selecting a year and month, with min/max constraints.
  • Additional components: ExtendedDatePicker and InlineDatePicker.

Supported versions

Add-on version Vaadin version
4.x 24–25
2.x 23

Refer to the Vaadin Directory page for exact version compatibility.

Installation

From the Vaadin Directory

Available in the Vaadin Directory.

Maven dependency

<dependency>
    <groupId>org.vaadin.addons.flowingcode</groupId>
    <artifactId>year-month-calendar</artifactId>
    <version>X.Y.Z</version>
</dependency>

Replace X.Y.Z with the latest released version. Add the Vaadin add-ons repository to your pom.xml:

<repository>
    <id>vaadin-addons</id>
    <url>https://maven.vaadin.com/vaadin-addons</url>
</repository>

For snapshot builds, see maven.flowingcode.com/snapshots.

JavaDoc is published at javadoc.flowingcode.com.

Usage

Create a YearCalendar and highlight dates with a class-name generator, reacting to year changes and date selection:

YearCalendar calendar = new YearCalendar();

calendar.setClassNameGenerator(date -> {
    if (isPublicHoliday(date)) {
        return "holiday";
    }
    if (date.getDayOfWeek() == DayOfWeek.SATURDAY || date.getDayOfWeek() == DayOfWeek.SUNDAY) {
        return "weekend";
    }
    return null;
});

calendar.addYearChangedListener(e -> Notification.show("Year " + e.getYear() + " selected"));
calendar.addDateSelectedListener(ev -> Notification.show("Selected date: " + ev.getDate()));

calendar.setYear(2026);
add(calendar);

Show a single month with MonthCalendar:

MonthCalendar calendar = new MonthCalendar(YearMonth.now());

calendar.setClassNameGenerator(date -> {
    if (date.getDayOfWeek() == DayOfWeek.SATURDAY || date.getDayOfWeek() == DayOfWeek.SUNDAY) {
        return "weekend";
    }
    return null;
});

calendar.addDateSelectedListener(ev -> Notification.show("Selected date: " + ev.getDate()));
add(calendar);

Bind a year and month value with YearMonthField:

YearMonthField field = new YearMonthField();
field.setMin(YearMonth.of(2020, 1));
field.setMax(YearMonth.of(2030, 12));
field.addValueChangeListener(e -> Notification.show("Selected: " + e.getValue()));

The class names returned by the generator are styled through CSS (for example, .holiday and .weekend).

Special configuration when using Spring

When running on Spring, allow-list the com.flowingcode package so Vaadin Flow can discover the add-on's components. See Common configuration for details.

API reference

Headline types exposed by the add-on:

  • YearCalendar — full-year calendar; implements HasSize, HasTheme. Key methods: setYear(int), getYear(), setReadOnly(boolean), setClassNameGenerator(ValueProvider<LocalDate, String>), refreshAll(), refreshItem(LocalDate), addYearChangedListener(...), plus inherited setI18n(...) and addDateSelectedListener(...).
  • MonthCalendar — single-month calendar; implements HasSize, HasTheme. Constructors: MonthCalendar(int year, Month month), MonthCalendar(YearMonth). Key methods: setYearMonth(YearMonth), getYearMonth(), getMonth(), setReadOnly(boolean), setClassNameGenerator(...), refreshAll(), refreshItem(LocalDate).
  • YearMonthField — value component for a year and month; extends AbstractSinglePropertyField<YearMonthField, YearMonth>. Key methods: setMin(YearMonth), setMax(YearMonth), setI18n(...), plus the inherited HasValue methods.
  • DateSelectedEvent — fired on date selection; getDate() returns the selected LocalDate.
  • YearChangedEvent — fired when the year view changes; getYear() returns the new year.

For the full API surface, browse the published JavaDoc.

Demo

A live demo is available at addonsv25.flowingcode.com/year-month-calendar. To run the demo locally:

git clone https://github.com/FlowingCode/YearMonthCalendarAddon.git
cd YearMonthCalendarAddon
mvn clean install jetty:run

Then open http://localhost:8080/.

Source code

YearMonthCalendarAddon on GitHub — distributed under Apache License 2.0.