v7.3.0

EventBuffer
Feature

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.

This feature is disabled by default

Useful configs

Config Description
showDuration Show duration labels on buffer zones
renderer Customize the preamble and postamble appearance

See also

  • EventModel — The event model with preamble/postamble fields
  • DayView — The view where buffer zones are rendered
No results

Configs

Configs are options you supply in a configuration object when creating an instance of this class
  • showDuration : Booleantrue

    Show buffer duration labels

Properties

Properties are getters/setters or publicly accessible variables on this class

CSS variables

CSS variables that can be set to adjust appearance
Name Description
--b-calendar-event-buffer-background Event buffer background
--b-calendar-event-buffer-border-color Event buffer border color
--b-calendar-event-buffer-color Event buffer text color
id: eventBuffer

Source path

Calendar/feature/EventBuffer.js

Demo

examples/travel-time

Contents