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'
}
}
});
Useful configs
| Config | Description |
|---|---|
| side | Dock side ('left' or 'right') |
| resourceFilter | Configuration for the resource filter widget |
| highlightMultiSelectSpan | Highlight background of multi-select date range |
See also
- sidebar — Config on Calendar that creates this widget
- CalendarDatePicker — The date picker shown in the sidebar
- ResourceFilter — The resource filter shown in the sidebar
Configs
Configs are options you supply in a configuration object when creating an instance of this class-
If the datePicker is set to multiSelect, setting this to
trueshows a background highlight effect on the week rows that your selected range encompasses to help the end user visualize the time ranges being evaluated.Has a corresponding runtime highlightMultiSelectSpan property.
-
A configuration object specifying options to change how the sidebar's resourcefilter is configured.
Has a corresponding runtime resourceFilter property.
Properties
Properties are getters/setters or publicly accessible variables on this class-
Identifies an object as an instance of Sidebar class, or subclass thereof.
-
If the datePicker is set to multiSelect, setting this to
trueshows a background highlight effect on the week rows that your selected range encompasses to help the end user visualize the time ranges being evaluated.Has a corresponding highlightMultiSelectSpan config.
-
The resource filtering widget which hides and shows events based upon whether they are assigned to the selected resources.
Has a corresponding resourceFilter config.
-
Identifies an object as an instance of Sidebar class, or subclass thereof.
CSS variables
CSS variables that can be set to adjust appearance| 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. |