Home

FullCalendar web component addon

This addon is an integration of the FullCalendar as a Flow component for Vaadin 14+.

The latest version 3.x.x of this addon uses the FullCalendar 5. The version 2.x.x uses the older FullCalendar 4.

Note Version 2.x.x will only receive maintenance fixes, while new features will be developed for the 3.x.x version.

Please also have a look at the demo for some basic examples and source code of how to integrate the FC. For more examples please have a look into the example section.

Authors of this addon

This addon is currently maintained by Carlo Zanocco and me. If you have any questions or issues, please use the GitHub repository issues page.

Vaadin directory

Fullcalendar: https://vaadin.com/directory/component/full-calendar-flow

Fullcalendar Scheduler: https://vaadin.com/directory/component/full-calendar-scheduler-flow/overview

Additional links and information

• Homepage about the FullCalendar (functionality, features, license information, etc.) visit https://fullcalendar.io/
• For a Vaadin 10-13 version (built on FC 3.10.x) https://vaadin.com/directory/component/full-calendar-web-component-vaadin10
• GitHub profile of Carlo: https://github.com/aetasoul

---

Addon Functionality

The following functions are currently implemented and available to use from server side:

• adding / updating / removing calendar items,

• switching between shown intervals (next month, previous month, etc.),

• goto a specific date or today,

• switch the calendar view (month, basic views for days and weeks, agenda views for days and weeks, list views for day to year),

• setting a locale to be used for displaying week days, formatting values, calculating the first day of the week, etc. (supported locales are provided as constant list)

• setting the first day of week to be shown (overrides the locale setting),

• show of week numbers

• limit max shown entries per day (except basic views)

• showing now indicator

• activating day / week numbers / names to be links

• setting a eventRender JS function from server side

• setting business hours information (multiple entries possible)

• creating recurring events

• setting / handling timezones and their offsets (by default the FC uses UTC times and dates)

• Event handling for

  • clicking an empty time spot in the calendar,
  • selecting a block of empty time spots in the calendar,
  • clicking an entry,
  • moving an entry via drag and drop (event is fired on drop + changed time),
  • resizing an entry (event is fired after resize + changed time),
  • view rendered (i. e. to update a label of the shown interval)
  • clicking on limited entries link "+ X more"
  • clicking on a day's or week's number link (when activated)

• Model supports setting

  • title,
  • start / end / all day flag,
  • color (html colors, like "#f00" or "red"),
  • description (not shown via FC),
  • editable / read only
  • rendering mode (normal, background, inversed background)
  • recurring data (day of week, start / end date and time)

Feedback and co.

If there are bugs or you need more features (and I'm not fast enough) feel free to contribute on GitHub. :) I'm also happy for feedback or suggestions about improvements.