Sidebar

This class is not supposed to be used directly. This widget provides the utility UI as the sidebar of a Calendar widget.

Sidebar items provided by default:

Widget ref	Type	Weight	Description
`datePicker`	CalendarDatePicker	100	Used to pick Calendar's active date
`eventFilter`	FilterField	150	Used to filter events by name
`resourceFilter`	ResourceFilter	200	Used to select resources to show events for

The configuration of these items may be overridden:

new Calendar({
    sidebar : {
        items : {
            datePicker : {
                // Never go to dates in the past
                minDate : new Date()
            },
            eventFilter : {
                // Let's have this at the top
                weight : 50
            },
            resourceFilter : {
                store : {
                    sorters : [{
                        field     : 'name',
                        // By default this is in ascending name order
                        // Let's change that round.
                        ascending : false
                    }]
                }
            }
        }
    }
});

The bbar is used to hold the navigation buttons ("Today" and next/previous) when the owning Calendar is configured with navigatorPlacement set to 'sidebar'. The location of the bbar, as well as other options, can be changed via the bbar config, like so:

 new Calendar({
     sidebar : {
         bbar : {
             dock : 'top'
         }
     }
 });

Sidebar widget

//<code-header>
fiddle.title = 'Sidebar widget';
//</code-header>
new Sidebar({
    appendTo : targetElement,
    height   : 500,
    width    : 400,
    items    : {
        // You can add new widgets to the side bar easily (as well as hide or customize built-in ones)
        project : {
            type   : 'combo',
            label  : 'Project',
            weight : 197,
            items  : [
                'Horizon Estates',
                'Harbor View Condos',
                'Apex Avenue'
            ]
        }
    },
    bbar : [
        {
            text : 'Custom button',
            onClick() {
                Toast.show('You clicked the button');
            }
        }
    ]
});

Configs

116

Common

listenersEvents

Other

highlightMultiSelectSpan: BooleanAlso a property

If the datePicker is set to multiSelect, setting this to true shows a background highlight effect on the week rows that your selected range encompasses to help the end user visualize the time ranges being evaluated.

resourceFilter: ResourceFilterConfig | nullAlso a property

A configuration object specifying options to change how the sidebar's resourcefilter is configured.

side: left | right= left

May be configured with 'left' or 'right' to dock the Sidebar to either side.

Defaults to 'left'.

snapMultiSelectNavigation: BooleanAlso a property

If the datePicker is set to multiSelect, then by default, cooperating views (See datePicker) will have their navigation shiftIncrement set to navigate week-by-week when using the Next and Previous buttons.

Configure this as false to have the views step forwards or backwards by exactly the length of the selected range.

callOnFunctionsWidget

catchEventHandlerExceptionsEvents

columnWidget

defaultFocusContainer

detectCSSCompatibilityIssuesWidget

drawerPanel

inputFieldAlignContainer

labelPositionContainer

renditionContainer

responsiveResponsive

responsiveRootResponsive

responsiveStateResponsive

responsiveTargetResponsive

rtlRTL

spanWidget

Accessibility

ariaDescriptionWidget

ariaLabelWidget

keyMapKeyMap

Content

bbarPanel

defaultsContainer

footerPanel

headerPanel

itemsContainer

lazyItemsContainer

namedItemsContainer

stripsPanel

tbarPanel

textContentContainer

toolsPanel

trapFocusPanel

CSS

bodyClsPanel

borderContainer

clsWidget

colorWidget

contentElementClsWidget

htmlClsWidget

itemClsContainer

styleWidget

uiPanel

DOM

adoptWidget

appendToWidget

contentWidget

datasetWidget

htmlWidget

idWidget

insertBeforeWidget

insertFirstWidget

tagWidget

Float & align

alignWidget

anchorWidget

centeredWidget

constrainToWidget

draggableWidget

floatingWidget

hideAnimationWidget

maximizeOnMobileWidget

positionedWidget

scrollActionWidget

showAnimationWidget

xWidget

yWidget

Layout

alignSelfWidget

collapsedPanel

collapsiblePanel

dockWidget

flexWidget

heightWidget

hiddenWidget

hideWhenEmptyContainer

layoutContainer

layoutStyleContainer

marginWidget

maxHeightWidget

maxWidthWidget

minHeightWidget

minWidthWidget

textAlignWidget

weightWidget

widthWidget

misc

tabBarItemsContainer

Misc

bubbleEventsEvents

dataFieldWidget

defaultBindPropertyWidget

disabledWidget

elementAttributesWidget

iconPanel

ignoreParentReadOnlyWidget

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

maskDefaultsWidget

maskedWidget

monitorResizeWidget

ownerWidget

preventTooltipOnTouchWidget

readOnlyWidget

refWidget

rippleWidget

rootElementWidget

showTooltipWhenDisabledWidget

tabWidget

titlePanel

tooltipWidget

Record

autoUpdateRecordContainer

recordContainer

strictRecordMappingContainer

Scrolling

scrollableWidget

State

statefulState

statefulEventsState

stateIdState

stateProviderState

Properties

Class hierarchy

isSidebar: Boolean= truereadonly

Identifies an object as an instance of Sidebar class, or subclass thereof.

isSidebar: Boolean= truereadonlystatic

Identifies an object as an instance of Sidebar class, or subclass thereof.

isContainerContainer

isDelayableDelayable

isEventsEvents

isKeyMapKeyMap

isLocalizableLocalizable

isPanelPanel

isResponsiveResponsive

isRTLRTL

isStateState

isToolableToolable

isWidgetWidget

Other

highlightMultiSelectSpan: BooleanAlso a config

resourceFilter: ResourceFilterAlso a config

The resource filtering widget which hides and shows events based upon whether they are assigned to the selected resources.

snapMultiSelectNavigation: BooleanAlso a config

Configure this as false to have the views step forwards or backwards by exactly the length of the selected range.

$namestaticWidget

catchEventHandlerExceptionsEvents

columnWidget

convertPinchToMousewheelstaticWidget

firstItemContainer

hasChangesContainer

inputFieldAlignContainer

isSettingValuesContainer

isStatefulState

isValidContainer

itemsContainer

labelPositionContainer

lastItemContainer

renditionContainer

rtlRTL

spanWidget

toolsPanel

typestaticWidget

valuesContainer

Accessibility

focusVisibleWidget

keyMapKeyMap

Content

bbarPanel

tbarPanel

CSS

clsWidget

DOM

appendToWidget

contentWidget

contentElementWidget

datasetWidget

elementWidget

focusableElementWidget

focusElementWidget

htmlWidget

idWidget

insertBeforeWidget

insertFirstWidget

overflowElementWidget

styleWidget

Float & align

anchorSizeWidget

maximizeOnMobileWidget

xWidget

yWidget

Layout

alignSelfWidget

collapsedPanel

collapsingPanel

expandingPanel

flexWidget

heightWidget

layoutContainer

layoutStyleContainer

marginWidget

maxHeightWidget

maxWidthWidget

minHeightWidget

minWidthWidget

scrollableWidget

widthWidget

Lifecycle

configBase

isConstructingBase

isDestroyedBase

isDestroyingBase

Misc

callOnFunctionsEvents

cellInfoWidget

disabledWidget

localeHelperLocalizable

localeManagerLocalizable

readOnlyWidget

refWidget

tabWidget

titlePanel

tooltipWidget

Record

recordContainer

strictRecordMappingContainer

ownerWidget

parentWidget

previousSiblingWidget

visibleChildCountContainer

widgetMapContainer

Functions

Configuration

applyDefaultsstaticBase

Events

detachListenersBase

Float & align

alignToWidget

setXYWidget

showByWidget

toFrontWidget

Lifecycle

constructBase

constructorBase

createstaticWidget

destroystaticBase

doDestroyBase

initClassstaticWidget

setConfigBase

Misc

animatePropertyBase

attachTooltipstaticWidget

callbackBase

downloadTestCaseBase

fromElementstaticWidget

fromSelectorstaticWidget

getByIdstaticWidget

isOfTypeNamestaticBase

mixinstaticBase

optionalLstaticLocalizable

resolveCallbackBase

toggleCollapsedPanel

updateLocalizationLocalizable

Other

addContainer

addListenerEvents

announceAriaLiveWidget

collapsePanelPanel

composeWidget

createOnFrameDelayable

disableWidget

enableWidget

exitFullscreenWidget

expandPanelPanel

focusWidget

getAtContainer

getWidgetByIdContainer

hasListenerEvents

insertContainer

LstaticLocalizable

maskWidget

onEvents

processWidgetConfigContainer

recomposeWidget

relayAllEvents

removeContainer

removeAllContainer

removeAllListenersEvents

removeListenerEvents

requestFullscreenWidget

resetValuesContainer

resumeEventsEvents

revertFocusWidget

setValuesContainer

suspendEventsEvents

triggerEvents

unEvents

unmaskWidget

State

applyStateState

getStateState

loadStateState

saveStateState

Visibility

hideWidget

showWidget

Widget hierarchy

closestWidget

containsWidget

eachAncestorWidget

eachWidgetWidget

ownsWidget

queryWidget

queryAllWidget

upWidget

Events

beforeDestroyEvents

beforeHideWidget

beforeResponsiveStateChangeResponsive

beforeSetRecordContainer

beforeShowWidget

beforeStateApplyState

beforeStateSaveState

catchAllEvents

collapsePanel

destroyEvents

dirtyStateChangeContainer

elementCreatedWidget

expandPanel

focusInWidget

focusOutWidget

hideWidget

paintWidget

readOnlyWidget

recomposeWidget

resizeWidget

responsiveStateChangeResponsive

showWidget

toolClickPanel

Event handlers

onBeforeDestroyEvents

onBeforeHideWidget

onBeforeResponsiveStateChangeResponsive

onBeforeSetRecordContainer

onBeforeShowWidget

onBeforeStateApplyState

onBeforeStateSaveState

onCatchAllEvents

onCollapsePanel

onDestroyEvents

onDirtyStateChangeContainer

onElementCreatedWidget

onExpandPanel

onFocusInWidget

onFocusOutWidget

onHideWidget

onPaintWidget

onReadOnlyWidget

onRecomposeWidget

onResizeWidget

onResponsiveStateChangeResponsive

onShowWidget

onToolClickPanel

Typedefs

AlignSpecWidget

BryntumListenerConfigEvents

CellWidgetContextWidget

ColorWidget

DelayableConfigDelayable

KeyMapConfigKeyMap

PanelHeaderPanel

ResponsiveStateResponsive

CSS variables

Name	Description
`--b-sidebar-border-inline-end`	Border between sidebar and calendar
`--b-sidebar-width`	The width applied to the `flex-basis` of the Sidebar When there is a date picker, this is overridden to a fixed width to make room for the date picker.

Inherited

Panel21

Container11

Widget20