Directory

← Back

Calendar Component

Calendar component displays items in a monthly calendar view

Author

Rating

Popularity

200+

Calendar Component
Calendar component displays items in a monthly calendar view

Features

  • Populate items either by setItems methods, or extending AbstractCalendarDataProvider
  • Apply themes to the displayed items (blue, green, red, gray)
  • Provides a listener for item click events

Sample code

calendar = new CalendarComponent<EventData>()
    .withItemDateGenerator(e -> e.getDate())
    .withItemLabelGenerator(e -> e.getLabel())
    .withItemThemeGenerator(e -> e.getTheme());
calendar.setItems(new EventData(new Date(), "Sample Event", CalendarItemTheme.LightGreen));
calendar.addEventClickListener(evt -> Notification.show(evt.getDetail().getLabel()));
calendar = new CalendarComponent<EventData>().withItemDateGenerator(e -> e.getDate())
    .withItemLabelGenerator(e -> e.getLabel())
    .withItemThemeGenerator(e -> e.getTheme());
calendar.setDataProvider(new CustomDataProvider());
calendar.addEventClickListener(evt -> Notification.show(evt.getDetail().getLabel()));
    add(calendar);

// Custom Data Provider
public class CustomDataProvider extends AbstractCalendarDataProvider<DemoView.EventData> {
  @Override
  public Collection<DemoView.EventData> getItems(Date fromDate, Date toDate) {
    List<DemoView.EventData> events = new ArrayList<>();
    events.add(new EventData(new Date(), "Sample Event", CalendarItemTheme.Gray));
    return events;
  }
}

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Released
2018-10-16
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 10+
Browser
Firefox
Safari
Google Chrome

Calendar Component - Vaadin Add-on Directory

Calendar component displays items in a monthly calendar view Calendar Component - Vaadin Add-on Directory
Calendar Component
Calendar component displays items in a monthly calendar view Features
  • Populate items either by setItems methods, or extending AbstractCalendarDataProvider
  • Apply themes to the displayed items (blue, green, red, gray)
  • Provides a listener for item click events
Online