FullCalendar for Flow

Integration of Full Calendar for the Vaadin Framework 14+

View larger

Close

View larger

Close

View larger

Close

View larger

Close

View larger

Close

FullCalendar web component addon

This addon is an integration of the FullCalendar as a Flow component. It is based on the version 6.1.6 of the FullCalendar library.

Please also visit the homepage of the FullCalendar at https://fullcalendar.io/. They did a great job at building the foundation for this addons.

Requirements / versions / support

The addon is built against Vaadin 14.x and Java 8, but is intended to be used with the latest major Vaadin version and thus also supports Vaadin 23 and 24 / Java 11+.

Addon versions prior to the current major version are not supported anymore. If you need a fix for such a version feel free to fork the project. You may create an issue, but due to limited time it is very unlikely, that we will fix it.

Migration guides, samples, release note details

Since the addon and it's related information grows and grows, we decided to move most of the relevant information to our repository's wiki. Here you'll find integration examples, migration guides, a feature list, etc. We strongly recommend to check it out :)

Main page: https://github.com/stefanuebe/vaadin_fullcalendar/wiki

Samples: https://github.com/stefanuebe/vaadin_fullcalendar/wiki/FullCalendar-Examples

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.

GitHub profile of Carlo: https://github.com/aetasoul

Scheduler license information:

Please be aware, that the FullCalender Scheduler library this addon is based on has a different license model then the basic FullCalendar. For details about the license, visit https://fullcalendar.io/license.

This addon does not provide any commercial license for the Scheduler. The license model of MIT does only affect the additional files of this addon, not the used original files.

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.

Vaadin directory

You find the official maven releases at the Vaadin directory: Fullcalendar: https://vaadin.com/directory/component/full-calendar-flow Fullcalendar Scheduler: https://vaadin.com/directory/component/full-calendar-scheduler-flow/overview

Sample code

// Create a new calendar instance and attach it to our layout
FullCalendar calendar = FullCalendarBuilder.create().build();
container.add(calendar);
container.setFlexGrow(1, calendar);

// Create a initial sample entry
Entry entry = new Entry();
entry.setTitle("Some event");
entry.setColor("#ff3333");

// the given times will be interpreted as utc based - useful when the times are fetched from your database
entry.setStart(LocalDate.now().withDayOfMonth(3).atTime(10, 0));
entry.setEnd(entry.getStart().plusHours(2));

// FC uses a data provider concept similar to the Vaadin default's one, with some differences
// By default the FC uses a in-memory data provider, which is sufficient for most basic use cases.
calendar.getEntryProvider().asInMemory().addEntries(entry);

/*
 * The day click event listener is called when a user clicks in an empty space inside of the 
 * calendar. Depending of if the clicked point was a day or time slot the event will provide the 
 * time details of the clicked point. With this info you can show a dialog to create a new entry.
 */
calendar.addTimeslotsSelectedListener((event) -> {
   // react on the selected timeslot, for instance create a new instance and let the user edit it
   Entry entry = new Entry();
   
   entry.setStart(event.getStart()); // also event times are always utc based
   entry.setEnd(event.getEnd());
   entry.setAllDay(event.isAllDay());
   
   entry.setColor("dodgerblue");
   
   // ... show an editor
});

/*
 * The entry click event listener is called when the user clicks on an existing entry. 
 * The event provides the clicked event which might be then opened in a dialog.
 */
calendar.addEntryClickedListener((event) -> {
   // react on the clicked entry, for instance let the user edit it
   Entry entry = event.getEntry();

   // ... show an editor
});

InMemoryEntryProvider<Entry> entryProvider = calendar.getEntryProvider().asInMemory();

HorizontalLayout buttons = new HorizontalLayout();
Button buttonSave;
if (newInstance) {
   buttonSave = new Button("Create", e -> {
       if (binder.validate().isOk()) {
           // add the entry to the calendar instance
           entryProvider.addEntry(entry);
           entryProvider.refreshAll();
       }
   });
} else {
   buttonSave = new Button("Save", e -> {
       if (binder.validate().isOk()) {
           // update an existing entry in the client side
           // this will only send changed data
           entryProvider.refreshItem(entry);
       }
   });
}
buttons.add(buttonSave);

if (!newInstance) {
   Button buttonRemove = new Button("Remove", e -> {
       entryProvider.removeEntry(entry);
       entryProvider.refreshAll();
   });
   buttons.add(buttonRemove);
}

// This sample shows the basic usage of entry providers based on the in memory entry provider. Check our wiki for more samples.

// load items from backend
List<Entry> entryList = backend.streamEntries().collect(Collectors.toList());

// init lazy loading provider based on given collection - does NOT use the collection as backend as ListDataProvider does
LazyInMemoryEntryProvider<Entry> entryProvider = EntryProvider.lazyInMemoryFromItems(entryList);

// set entry provider
calendar.setEntryProvider(entryProvider);

// CRUD operations
// to add
Entry entry = new Entry();       // ... plus some init
entryProvider.addEntries(entry); // register in data provider
entryProvider.refreshAll();         // call refresh to inform the client about the data change and trigger a refetch

// after some change
entryProvider.refreshItem(entry); // call refresh to inform the client about the data change and trigger a refetch

// to remove
entryProvider.removeEntry(entry);
entryProvider.refreshAll(); // call refresh to inform the client about the data change and trigger a refetch

Links

• Online Demo
• Online Demo utilizing tippy.js
• Migration Guides
• Release Notes
• View on GitHub
• Issue tracker

Compatibility