ScrollButtons

This feature injects buttons to the beginning and end of each row that will scroll to the next or previous event outside the current view. It can optionally show a label along with the button, using the labelRenderer. Only supported in horizontal mode

new Scheduler({
    appendTo : 'container',
    features : {
        scrollButtons : {
            labelRenderer({ resourceRecord, isBefore, nbrEvents }) {
                return `${nbrEvents} events`;
            }
        }
    }

Scroll buttons
//<code-header>
fiddle.title = 'Scroll buttons';
//</code-header>
const scheduler = new Scheduler({
    appendTo : targetElement,

    // makes scheduler as high as it needs to be to fit rows
    autoHeight : true,
    tickSize   : 60,
    startDate  : new Date(2024, 2, 20),

    columns : [
        { field : 'name', text : 'Name', width : 100 }
    ],

    features : {
        scrollButtons : true
    },

    resources : [
        { id : 1, name : 'George', eventColor : 'blue' },
        { id : 2, name : 'Rob', eventColor : 'green' }
    ],

    events : [
        {
            id                : 1,
            name              : 'Project X',
            startDate         : '2024-03-24',
            duration          : 4,
            manuallyScheduled : true,
            percentDone       : 80
        },
        {
            id                : 2,
            name              : 'Customer Project Y',
            startDate         : '2024-03-24',
            duration          : 4,
            manuallyScheduled : true,
            percentDone       : 40
        },
        {
            id                : 3,
            name              : 'Golf tournament',
            startDate         : '2024-01-28',
            manuallyScheduled : true,
            duration          : 5
        },
        {
            id                : 4,
            name              : 'Meeting',
            startDate         : '2024-04-29',
            duration          : 4,
            manuallyScheduled : true,
            percentDone       : 40
        }
    ],
    assignments : [
        { id : 1, event : 1, resource : 1 },
        { id : 2, event : 2, resource : 2 },
        { id : 3, event : 3, resource : 1 },
        { id : 4, event : 4, resource : 2 }
    ]
});

This feature is disabled by default.

Configs

13

Common

disabledInstancePlugin
listenersEvents

Other

backwardIconCls: String= b-icon-before

The icon to use for the button scrolling into the past

forwardIconCls: String= b-icon-after

The icon to use for the button scrolling into the future

labelRenderer: function

A method letting you render a label inside the button.

When returning content, be sure to consider how that content should be encoded to avoid XSS (Cross-Site Scripting) attacks. This is especially important when including user-controlled data such as the event's name. The function encodeHtml as well as xss can be helpful in these cases.

ParameterTypeDescription
detailObject

An object that contains data about the event being rendered.

detail.resourceRecordResourceModel

The resource record

detail.isBeforeBoolean

true if the label being rendered is for the arrow scrolling into the past

detail.nbrEventsNumber

The number of events that can be scrolled to

Returns: String -

The text or HTML

scrollOptions: BryntumScrollOptions

A config object describing how the scroll action should be performed.

catchEventHandlerExceptionsEvents

Misc

bubbleEventsEvents
callOnFunctionsEvents
clientInstancePlugin
localeClassLocalizable
localizableLocalizable
localizablePropertiesLocalizable

Properties

15

Common

disabledInstancePlugin

Class hierarchy

isScrollButtons: Boolean= truereadonly
Identifies an object as an instance of ScrollButtons class, or subclass thereof.
isScrollButtons: Boolean= truereadonlystatic
Identifies an object as an instance of ScrollButtons class, or subclass thereof.
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

6
scrollButtonClick

Fires on owner when the scroll button is clicked, return false to prevent default scroll behavior

// Adding a listener using the "on" method
scrollButtons.on('scrollButtonClick', ({ domEvent, resourceRecord }) => {

});
ParameterTypeDescription
domEventEvent

DOM event

resourceRecordResourceModel

The resource record

beforeDestroyEvents
catchAllEvents
destroyEvents
disableInstancePlugin
enableInstancePlugin

Event handlers

6
onScrollButtonClick

Called on owner when the scroll button is clicked, return false to prevent default scroll behavior

new ScrollButtons({
    onScrollButtonClick({ domEvent, resourceRecord }) {

    }
});
ParameterTypeDescription
domEventEvent

DOM event

resourceRecordResourceModel

The resource record

onBeforeDestroyEvents
onCatchAllEvents
onDestroyEvents
onDisableInstancePlugin
onEnableInstancePlugin

Typedefs

1

CSS variables

6
NameDescription
--b-scroll-button-border-radiusScroll button border-radius
--b-scroll-button-border-widthScroll button border width
--b-scroll-button-colorScroll button color
--b-scroll-button-backgroundScroll button background color
--b-scroll-button-font-sizeScroll buttons font-size
Hovered
--b-scroll-button-hover-colorScroll button hover color