EventBuffer

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. You can configure whether the buffer time intervals should be considered busy time or available time using bufferIsUnavailableTime.

The feature relies on two model fields: preamble and postamble which are used to calculate overall start and end dates used to position the event. Buffer time overlaps the same way events overlap (as you can see in the inline demo below). It should also be noted that buffer time is ignored for milestones.

Event buffer

//<code-header>
fiddle.title = 'Event buffer';
//</code-header>
targetElement.innerHTML = '<p>Open editor to change setup / cleanup:</p>';
const schedulerPro = new SchedulerPro({
    appendTo : targetElement,

    // makes scheduler as high as it needs to be to fit rows
    autoHeight : true,

    startDate  : new Date(2022, 4, 6, 9),
    endDate    : new Date(2022, 4, 6, 17),
    viewPreset : 'hourAndDay',
    barMargin  : 12,

    columns : [
        { type : 'resourceInfo', field : 'name', text : 'Meeting Rooms', showEventCount : false, showMeta : record => `Car: ${record.car}`, width : 150 }
    ],

    features : {
        eventBuffer : {
            renderer({ eventRecord, preambleConfig, postambleConfig }) {
                if (eventRecord.preamble) {
                    preambleConfig.icon = 'fa fa-car';
                    preambleConfig.cls  = 'travel-before';
                    preambleConfig.text = eventRecord.preamble.toString(true);
                }

                if (eventRecord.postamble) {
                    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-06T10:00:00', duration : 3, durationUnit : 'h', preamble : '1 hour', postamble : '30 minute' },
            { id : 2, resourceId : 2, name : 'Board meeting', startDate : '2022-05-06T11:00:00', duration : 2, durationUnit : 'h', preamble : '20 minute', postamble : '25 minute', resizable : false, eventColor : 'red' },
            { id : 3, resourceId : 3, name : 'Starbucks meeting', startDate : '2022-05-06T13:00:00', duration : 3, durationUnit : 'h', preamble : '25 minute', postamble : '15 minute', resizable : false, eventColor : 'red' }
        ],

        calendars : [
            {
                id        : 'general',
                name      : 'General',
                intervals : [
                    {
                        recurrentStartDate : 'on Sat',
                        recurrentEndDate   : 'on Mon',
                        isWorking          : false
                    }
                ]
            }
        ],

        calendar : 'general'
    }
});

This feature is disabled by default

Configs

Common

disabledInstancePlugin

listenersEvents

Other

bufferIsUnavailableTime: Boolean= falseAlso a property

Set to true to treat buffer time spans as unavailable time (will effect the resource's availability).

renderer: function

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

const schedulerPro = new SchedulerPro({
    features : {
        eventBuffer : {
            renderer({ eventRecord, resourceRecord, preambleConfig, postambleConfig }) {
                preambleConfig.cls  = 'before';
                preambleConfig.icon = 'fa fa-car';
                preambleConfig.text = 'Car';

                postambleConfig.cls  = 'after';
                postambleConfig.icon = 'fa fa-bicycle';
                postambleConfig.text = 'Bike';
            }
        }
    }
});

Parameter	Type	Description
`data`	Object
`data.eventRecord`	EventModel	The event record
`data.resourceRecord`	ResourceModel	The resource record
`data.preambleConfig`	Object	A config object for the preamble
`data.preambleConfig.icon`	String	A CSS class for the icon to show (e.g. car / bicycle)
`data.preambleConfig.cls`	Object \| String	A CSS object for the preamble element
`data.preambleConfig.text`	String	The text to display
`data.postambleConfig`	Object	A config object for the postamble
`data.postambleConfig.icon`	String	A CSS class for the icon to show (e.g. car / bicycle)
`data.postambleConfig.cls`	Object \| String	A CSS object for the postamble element
`data.postambleConfig.text`	String	The text to display

Returns: void

showDuration: Boolean= trueAlso a property

Show buffer duration labels

tooltipTemplate: functionAlso a property

A function that receives data about the buffer time and returns a HTML string to show in a tooltip when hovering a buffer time element

Parameter	Type	Description
`data`	Object	Data
`data.duration`	Duration	Buffer time duration
`data.before`	Boolean	`true` if this is a buffer time before the event start, `false` if after
`data.eventRecord`	EventModel	The event record

Returns: String -

String representing the HTML markup

catchEventHandlerExceptionsEvents

Misc

bubbleEventsEvents

callOnFunctionsEvents

clientInstancePlugin

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

Properties

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.

isEventsEvents

isInstancePluginInstancePlugin

isLocalizableLocalizable

Other

bufferIsUnavailableTime: Boolean= falseAlso a config

Set to true to treat buffer time spans as unavailable time (will effect the resource's availability).

showDuration: Boolean= trueAlso a config

Show buffer duration labels

tooltipTemplate: functionAlso a config

A function that receives data about the buffer time and returns a HTML string to show in a tooltip when hovering a buffer time element

Parameter	Type	Description
`data`	Object	Data
`data.duration`	Duration	Buffer time duration
`data.before`	Boolean	`true` if this is a buffer time before the event start, `false` if after
`data.eventRecord`	EventModel	The event record