Description

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

The latest version 3.x of this addon uses the FullCalendar 5, while version 2.x uses the older FullCalendar 4. Please note, that 2.x is not maintained anymore (except for critical issues).

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.

Additional links and information

• Homepage about the FullCalendar (functionality, features, license information, etc.) visit https://fullcalendar.io/
• If you want to use the FC Scheduler, please have a look at this addon: https://vaadin.com/directory/component/full-calendar-scheduler-flow
• 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)

Known issues

Calendar crashes when clicking (V14+)

For some, currently unknown reason, sizing a calendar after the view has changed manually on a newly created calendar lets the calendar crash, when clicking inside somewhere. I have no idea, why that is so. Please see https://github.com/stefanuebe/vaadin_fullcalendar/issues/45 for details and progress.

Build problems / JS (client side) errors (V14+)

It might be, that the transitive dependencies are not resolved correctly.

If you are using Spring Boot please add the @EnableVaadin annotation to your application class. Add the package org.vaadin.stefan plus your root package as parameters. This should enable Spring to analyze all npm dependencies at runtime. Other CDI version should work the same.

If you are not using Spring, but have similiar issues try to add also the goal build-frontend to the vaadin maven plugin. This should resolve transitive npm dependencies at build time.

For instance:

<plugin>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-maven-plugin</artifactId>
    <version>${vaadin.version}</version>
    <executions>
        <execution>
            <goals>
                <goal>prepare-frontend</goal>
                <goal>build-frontend</goal>
            </goals>
        </execution>
    </executions>
</plugin>

FAQ

Q: The calendar instance is not recognized during build time or loading of frontend dependencies (leads client side errors)

A: Please see Build problems / JS (client side) errors with V14 for further details.

Q: The DatesRenderedEvent is not fired when setting an option, that changes the view.

A: I deactivated the forwarding of the datesRendered event from the client side when an option is set, since that would lead otherwise to a huge amount of datesRendered events. When setting options before the client side is fully attached, the queueing messes up the event handling here.

When needed, you can activate or deactivate that by using the method allowDatesRenderEventOnOptionChange(boolean). By default this value is false, simply set it to true to also receive date render events on setOption.

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.