FullCalendar Scheduler Extension (Vaadin 10)

FullCalendar Scheduler extension

View larger

Close

View larger

Close

View larger

Close

FullCalendar Scheduler extension

This addon extends the FullCalendar integration addon with the FullCalendar Scheduler (v1.9.4) as Flow component for Vaadin Platform / Vaadin 10+.

It needs the FC integration addon (1.9.0+) as basis (https://vaadin.com/directory/component/full-calendar-web-component-vaadin10). Since this addon is not always updated when the basis gets an update, I would suggest, that you add both dependencies (basis and extension) to always use the latest version of basis. This extension is compatible as long as the readme does not tells anything else.

For information about the Schedular (functionality, features, license information, etc.) visit https://fullcalendar.io/scheduler.

License information:

Please be aware, that the Scheduler has a different license model then the FullCalendar. For details of when to use which license, visit https://fullcalendar.io/scheduler/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.

Activating the Scheduler

By default the scheduler is not active, when you use a FullCalendar instance. To have an instance with scheduler activated, use the withScheduler() method of the FullCalendarBuilder.

This method will throw an exception, if the scheduler extension is not on the class path.

To link a resource with entries, use the Entry subclass ResourceEntry.

Additional Features of the Scheduler extension

• Activation of the Scheduler by method in the FullCalendarBuilder.
• Adding resources to a calendar (hierarchies of resources are not yet supported).
• Link one or multiple resources with entries.
• List of possible Scheduler based views (timeline).

Info: Entries are linked to calendar internally. The calendar instance is used to resolve resources by after updating an entry on the client side.

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.

Sample code

FullCalendar calendar = FullCalendarBuilder.create().withScheduler().build();

// scheduler options
((Scheduler) calendar).setSchedulerLicenseKey(...);

Resource resource = new Resource(null, s, color);
calendar.addResource(resource);

// When we want to link an entry with a resource, we need to use ResourceEntry
// (a subclass of Entry)
ResourceEntry entry = new ResourceEntry(null, title, start.atStartOfDay(), start.plusDays(days).atStartOfDay(), true, true, color, "Some description...");
entry.setResource(resource);
calendar.addEntry(entry);

calendar.addEntryDroppedListener(event -> {
    event.applyChangesOnEntry();

    Entry entry = event.getEntry();

    if(entry instanceof ResourceEntry) {
        Set<Resource> resources = ((ResourceEntry) entry).getResources();
        if(!resources.isEmpty()) {
            // do something with the resource info
        }
    }
});

calendar.changeView(SchedulerView.TIMELINE_DAY);

calendar.setGroupEntriesBy(GroupEntriesBy.RESOURCE_DATE);

1. Copy the styles_scheduler.html from the github demo 
or create your own custom style file and place it in your 
applications webapp/frontend folder (e. g. webapp/frontend
/styles/styles/my-custom-full-calendar-styles.html)

The github demo file can be obtained from here:
https://github.com/stefanuebe/vaadin_fullcalendar/blob
/master/demo/src/main/webapp/frontend/styles_scheduler.html


2. Modify the styles as needed.
<custom-style>
    <style>
        html{
               --fc-timeline_fc-divider-border-style: dashed;
               --fc-timeline_fc-divider-width: 2px;
        }
    </style>
</custom-style>

3. Use the styles file in your application.
@HtmlImport("frontend://styles/full-calendar-styles-scheduler.html")
public class FullCalendarApplication extends Div {
    // ...
}

ResourceEntry entry = new ResourceEntry();
// ... setup entry details, including addResource()

entry.setRenderingMode(Entry.RenderingMode.BACKGROUND);
calendar.addEntry(entry);

Links

• Issue tracker
• Source Code
• Online Demo

Compatibility