EventBuffer

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.

The feature relies on two new model fields: preamble and postamble which are used to calculate overall start and end dates used to position the event. These fields must be a parseable duration as documented in Duration. for example:

{
    "name"      : "Do a job",
    "startDate" : "2024-08-10T10:00",
    "endDate"   : "2024-08-10T11:00",
    "preamble"  : "60min",
    "postamble" : "30min"
}

If preamble is not present, it is considered that there is no preamble. If postamble is not present, it is considered that there is no postamble.

When used, this feature adds two new, read-only properties to the event records:

  • outerStartDate The time at which the preamble begins.
  • outerEndDate The time at which the postamble ends.

Event buffer
//<code-header>
fiddle.title = 'Event buffer';
//</code-header>
targetElement.innerHTML = '<p>Open editor to change setup / cleanup:</p>';
const calendar = new Calendar({
    appendTo : targetElement,
    height   : 700,
    date     : new Date(2022, 4, 6, 9),

    features : {
        eventBuffer : {
            renderer({ eventRecord, preambleConfig, postambleConfig }) {
                if (eventRecord.preamble) {
                    preambleConfig.tooltip = `${DateHelper.as('minutes', eventRecord.preamble)} min drive time`;
                    preambleConfig.icon = 'fa fa-car';
                    preambleConfig.cls  = 'travel-before';
                    preambleConfig.text = eventRecord.preamble.toString(true);
                }

                if (eventRecord.postamble) {
                    postambleConfig.tooltip = `${DateHelper.as('minutes', eventRecord.postamble)} min drive time`;
                    postambleConfig.icon = 'fa fa-car';
                    postambleConfig.cls  = 'travel-after';
                    postambleConfig.text = eventRecord.postamble.toString(true);
                }
            }
        }
    },

    project : {
        resources : [
            { id : 1, name : 'John', car : 'Tesla', image : false, iconCls : 'b-icon fa-user' },
            { id : 2, name : 'Eva', car : 'Honda', image : false, iconCls : 'b-icon fa-user' },
            { id : 3, name : 'Dan', car : 'Buick', image : false, iconCls : 'b-icon fa-user' }
        ],

        events : [
            { id : 1, resourceId : 1, name : 'UN Meeting', startDate : '2022-05-03T10:00:00', duration : 3, durationUnit : 'h', preamble : '1 hour', postamble : '30 minute' },
            { id : 2, resourceId : 2, name : 'Board meeting', startDate : '2022-05-04T11:00:00', duration : 2, durationUnit : 'h', preamble : '40 minute', postamble : '50 minute', resizable : false, eventColor : 'red' },
            { id : 3, resourceId : 3, name : 'Starbucks meeting', startDate : '2022-05-05T13:00:00', duration : 3, durationUnit : 'h', preamble : '35 minute', postamble : '45 minute', resizable : false, eventColor : 'red' }
        ]
    }
});

This feature is disabled by default

Configs

11

Common

disabledInstancePlugin
listenersEvents

Other

renderer: function

A function which lets you customize the visual appearance of the preamble and postamble elements.

You should never modify any records inside this method.
ParameterTypeDescription
dataObject
data.eventRecordEventModel

The event record

data.resourceRecordResourceModel

The resource record (only available in resource views)

data.preambleConfigObject

A config object for the preamble

data.preambleConfig.iconString

A CSS class for the icon to show (e.g. car / bicycle)

data.preambleConfig.clsObject | String

A CSS object for the preamble element

data.preambleConfig.textString

The text to display

data.preambleConfig.tooltipString

Extra information to display when hovering the text

data.postambleConfigObject

A config object for the postamble

data.postambleConfig.iconString

A CSS class for the icon to show (e.g. car / bicycle)

data.postambleConfig.clsObject | String

A CSS object for the postamble element

data.postambleConfig.textString

The text to display

data.postambleConfig.tooltipString

Extra information to display when hovering the text

Returns: void
showDuration: Boolean= true

Show buffer duration labels

catchEventHandlerExceptionsEvents

Misc

bubbleEventsEvents
callOnFunctionsEvents
clientInstancePlugin
localeClassLocalizable
localizableLocalizable
localizablePropertiesLocalizable

Properties

16

Common

disabledInstancePlugin

Class hierarchy

isEventBuffer: Boolean= truereadonly
Identifies an object as an instance of EventBuffer class, or subclass thereof.
isEventBuffer: Boolean= truereadonlystatic
Identifies an object as an instance of EventBuffer class, or subclass thereof.
isCalendarFeatureCalendarFeature
isEventsEvents
isInstancePluginInstancePlugin
isLocalizableLocalizable

Lifecycle

configBase
isConstructingBase
isDestroyedBase
isDestroyingBase

Misc

callOnFunctionsEvents
clientInstancePlugin
localeHelperLocalizable
localeManagerLocalizable

Other

catchEventHandlerExceptionsEvents

Functions

28

Configuration

applyDefaultsstaticBase

Events

detachListenersBase

Lifecycle

constructBase
constructorBase
destroystaticBase
doDestroyBase
setConfigBase

Misc

animatePropertyBase
callbackBase
doDisableInstancePlugin
downloadTestCaseBase
initClassstaticBase
isOfTypeNamestaticBase
mixinstaticBase
optionalLstaticLocalizable
resolveCallbackBase
updateLocalizationLocalizable

Other

addListenerEvents
hasListenerEvents
LstaticLocalizable
onEvents
relayAllEvents
removeAllListenersEvents
removeListenerEvents
resumeEventsEvents
suspendEventsEvents
triggerEvents
unEvents

Events

5
beforeDestroyEvents
catchAllEvents
destroyEvents
disableInstancePlugin
enableInstancePlugin

Event handlers

5
onBeforeDestroyEvents
onCatchAllEvents
onDestroyEvents
onDisableInstancePlugin
onEnableInstancePlugin

Typedefs

1

CSS variables

3
NameDescription
--b-calendar-event-buffer-backgroundEvent buffer background
--b-calendar-event-buffer-border-colorEvent buffer border color
--b-calendar-event-buffer-colorEvent buffer text color