Calendar features
Features are classes that add functionality to Calendar. The purpose of this guide is to give an overview of the features that ships with Calendar and show how you can configure them.
Enabling/disabling and configuring features
Features are configured using Calendar's features config.
featureNameFeature properties. See Framework Integration Guide for details. Most features are enabled by default, in which case you can disable them like this:
const calendar = new Calendar({
features : {
// Drag-create, drag-move and drag-resize disabled
drag : false
}
});
Others require you to enable them:
const calendar = new Calendar({
features : {
weekExpander : true
}
});
Some features have configuration options (see the API docs for each feature for the options). In such cases you can specify a configuration object instead of true:
const calendar = new Calendar({
features : {
externalEventSource : { // Configuration object
// Element containing draggable items
dragRootElement : '#mySourceElementId',
// Draggable item selector. innerText will be used as event name
dragItemSelector : '.my-item-class'
}
}
});
If you need to access a feature at runtime, they are available through the features property on Calendar:
calendar.features.eventEdit.editEvent(calendar.eventStore.first);
When using Scheduler or EventList or AgendaView as Calendar modes
The Scheduler product has its own unique set of features.
The EventList and AgendaView modes are based on the Grid product which also has its own unique set of features.
If you require these particular modes to run features specific to these classes, the feature configuration must be applied to the mode, not the Calendar:
const calendar = new Calendar({
modes : {
list : {
features : {
cellTooltip : {
// Show tip quicker than default on hover
hoverDelay : 200,
// Show event notes detail when hovering the name column
tooltipRenderer({ column, record }) {
if (column.field === 'name') {
return record.notes;
}
}
}
}
}
}
});
Built-in features
Calendar itself has built-in core functionality for rendering resources & events, recurring events, selection and keyboard navigation. On top of that it ships with the features described below, some of which are enabled by default and some which you have to enable manually.
Click here to see the default features in action
AI (API docs)
This feature provides an AI agent for Calendar which allows the user to use natural language to interact with the Calendar in different ways. The feature and all its related components are marked as experimental and are subject to change.
This feature is disabled by default.
EventMenu (API docs)
Displays a context menu when right clicking events. Features (such as EventEdit) add items to the menu, it is also possible to configure extra items to show.
This feature is enabled by default.
Right click on an event to try it out.
ScheduleMenu (API docs)
Displays a context menu when right clicking empty time in the schedule. It is also possible to configure extra items to show.
This feature is enabled by default.
Right click on a day column to try it out.
CalendarDrag (API docs)
Drag to create, move or resize events.
This feature is enabled by default.
Try drag-creating a multi-day event across the columns in the demo.
EventEdit (API docs)
Displays an editor for editing event data. It is possible to customize which items are shown in the editor.
This feature is enabled by default.
Double click an event in the demo to show the editor:
EventTooltip (API docs)
Displays a tooltip upon click or hover of an event. The tooltip template can be customized to suite your needs.
This feature is enabled by default.
Click an event to show the default tooltip.
EventCopyPaste (API docs)
Adds copy-paste capabilities to events. Both via context menu and keyboard actions.
This feature is enabled by default.
Right-click an event in the demo, click Copy, and then right-click somewhere else to Paste.
ExcelExporter (API docs)
Allows exporting Calendar data to Excel without involving the server.
This feature is disabled by default.
Click here to see this in action
ExternalEventSource (API docs)
Allows creation of new events by dragging selected elements from a specified DOM element.
This feature is disabled by default.
LoadOnDemand API Docs
Loads the host Calendar's CrudManager on demand as the date range required to produce the UI changes.
This feature is disabled by default.
Click here to see this in action
Print API Docs
This feature enables printing of the current Calendar mode.
This feature is disabled by default.
Click here to see this in action
TimeRanges (API docs)
Add highlighted time ranges to the schedule.
This feature is disabled by default.
WeekExpander (API docs)
adds a week row expansion tool to week rows in MonthViews so that a row which contains overflowing cells can be expanded to show all events with no overflow.
This feature is disabled by default.
Click here to see this in action in the Month View
ScheduleTooltip (API docs)
A feature that displays a tooltip containing the time at the mouse position when hovering empty parts of the schedule.
This feature is disabled by default.
Click here to see this in action in the Week View
EventBuffer (API docs)
A Feature that allows showing additional time before & after an event, to visualize things like travel time - or the time you need to prepare a room for a meeting + clean it up after.
This feature is disabled by default.
Click here to see this in action in the Week View
Importing features from sources
A feature is registered when the application imports it. When using the regular module/umd bundle, this is done automatically, as the bundle encapsulates all code inside. However, when utilizing sources or thin bundles, a feature might not be imported by default. For any feature not enabled by default, it is essential to ensure that you have imported it to be able to use it.
Example:
import Calendar from 'PATH_TO_SOURCE/Calendar/view/Calendar.js';
import 'PATH_TO_SOURCE/Calendar/feature/WeekExpander.js';
const calendar = new Calendar({
features : {
filter : {
// feature config
}
}
});