AgendaView
This is normally used as a mode of a Calendar (as seen in the live demo below) but may be used standalone as a regular Widget.
//<code-header>
fiddle.title = 'Calendar agenda view';
//</code-header>
const calendar = new Calendar({
appendTo : targetElement,
height : 450,
date : '2021-09-01',
modes : {
day : null,
week : null,
month : null,
year : null,
agenda : true
},
events : [
{ startDate : '2021-09-01T07:00', duration : 2, durationUnit : 'h', name : 'Water flowers', eventColor : 'red' },
{ startDate : '2021-09-31T09:00', duration : 3, durationUnit : 'h', name : 'Take daughter to volley ball', eventColor : 'pink' },
{ startDate : '2021-09-04T07:00', duration : 5, durationUnit : 'h', name : 'Walk the dog', eventColor : 'yellow' },
{ startDate : '2021-09-04T09:00', duration : 2, durationUnit : 'h', name : 'Buy masks', eventColor : 'orange' },
{ startDate : '2021-09-05T07:00', duration : 1, durationUnit : 'h', name : 'Zoom meeting', eventColor : 'deep-orange' },
{ startDate : '2021-09-05T09:00', duration : 1, durationUnit : 'h', name : 'Get a haircut', eventColor : 'gray' }
]
});As a standalone widget, it will lack the capabilities of the Calendar class, such as keyboard-based event to event navigation and drag/drop features. As seen in this demo:
//<code-header>
fiddle.title = 'Agenda view';
//</code-header>
new AgendaView({
appendTo : targetElement,
height : 450,
date : '2021-09-01',
events : [
{ startDate : '2021-09-01T07:00', duration : 2, durationUnit : 'h', name : 'Water flowers', eventColor : 'red' },
{ startDate : '2021-09-31T09:00', duration : 3, durationUnit : 'h', name : 'Take daughter to volley ball', eventColor : 'pink' },
{ startDate : '2021-09-04T07:00', duration : 5, durationUnit : 'h', name : 'Walk the dog', eventColor : 'yellow' },
{ startDate : '2021-09-04T09:00', duration : 2, durationUnit : 'h', name : 'Buy masks', eventColor : 'orange' },
{ startDate : '2021-09-05T07:00', duration : 1, durationUnit : 'h', name : 'Zoom meeting', eventColor : 'deep-orange' },
{ startDate : '2021-09-05T09:00', duration : 1, durationUnit : 'h', name : 'Get a haircut', eventColor : 'gray' }
]
});A Grid which displays an agenda view of the events in an EventStore.
When used as a mode of a Calendar, the configured range is snapped to encapsulate the Calendar's current date.
If configured with an explicit startDate and endDate, the
range is not used. When setting the date, the duration
of the configured range is preserved, but the range is shifted backwards or forwards in time
just enough to bring the passed Date into view.
The AgendaView offers a floating settings button to allow the user to change the range type. This
may be disabled by configuring the listRangeMenu as null.
Column renderer
The content of each agenda cell is created by the AgendaColumn's defaultRenderer
To inject content or manipulate the cell's DOM, you may configure the column with a renderer:
modes : {
agenda : {
columns : {
agenda : {
renderer({ cellElement, record : cellData }) {
// Manipulate the cell as we need
cellElement.classList.toggle('is-sunday', cellData.day === 0);
// We need the system-provided cell rendering
return this.defaultRenderer(...arguments);
}
}
}
}
}
Configs
210
Configs
210Common
Misc
Specify false to display column headers
Other
If no dates in the view's configured date range contain events, then by default, no date cells are rendered.
Set this to true to always show a cell for the calendar's date in
order to allow users to interact with the view, for example by using the context menu, or the
autoCreate gesture.
Column definitions.
By default, a single AgendaColumn is configured which creates the default cell content for one day's events.
You may configure the default agenda column away, and provide a custom column type
to produce the day's content where the record passed is a
DayCell.
Because cells may contain varying numbers of events, all columns in an AgendaView are set to autoHeight
class MyAgendaColumn extends Column {
// So we automatically get b-myagenda-cell class on the cells
static get type() {
return 'myagenda';
}
renderer({ cellElement, record : cellData }) {
// Create a DomHelper element configuration object here using cellData
// cellData contains date contextual info and an events array.
}
}
...
{
columns : {
agenda : null,
{
type : 'mycolumntype'
}
}
}
// Register this Column type so that in the app we can use type : 'myagendacolumn'
ColumnStore.registerColumnType(MyAgendaColumn);
A callback function, or the name of a function in the ownership hierarchy which an application may provide to filter out agenda rows for individual dates.
| Parameter | Type | Description |
|---|---|---|
context | DayCell | Information about the day rows to be created. |
Return false to not display a rows for the passed date.
The spacing between event bars in the default rendering of a day cell.
By default, long running events are repeated in all rows that the event covers.
Configure this as true to only see the start of a long running event in its
start day.
This view lines up the textual content of event bars by shifting event bars of events which start before the bar's cell leftwards by the arrow width.
Set this config to false to prevent this.
The "Settings" button which is a floating button which offers the Agenda range selection menu
| Parameter | Type | Description |
|---|---|---|
actionKey | String | The composed key name to press to open the settings menu. Default is 'CTRL+R' |
By default, only dates which contain events are shown.
If set to true the view will include all dates in the configured range.
By default, only cells for days which contain events are shown.
If set to true the view will include cells for days which contain no events.
Content
CSS
DOM
Float & align
Layout
Masking
misc
State
Tree
Properties
189
Properties
189Common
Class hierarchy
Other
If no dates in the view's configured date range contain events, then by default, no date cells are rendered.
Set this to true to always show a cell for the calendar's date in
order to allow users to interact with the view, for example by using the context menu, or the
autoCreate gesture.
Yields a Map which contains the cell data for each date in the current view.
This is a Map where the keys are the date strings in the format
YYYY-MM-DD and the values are DayCell objects which contain the data for that cell.
A callback function, or the name of a function in the ownership hierarchy which an application may provide to filter out agenda rows for individual dates.
| Parameter | Type | Description |
|---|---|---|
context | DayCell | Information about the day rows to be created. |
Return false to not display a rows for the passed date.
This view lines up the textual content of event bars by shifting event bars of events which start before the bar's cell leftwards by the arrow width.
Set this config to false to prevent this.
Returns the resource associated with this agenda view when used inside a ResourceView
The "Settings" button which is a floating button which offers the Agenda range selection menu
| Parameter | Type | Description |
|---|---|---|
actionKey | String | The composed key name to press to open the settings menu. Default is 'CTRL+R' |
By default, only dates which contain events are shown.
If set to true the view will include all dates in the configured range.
By default, only cells for days which contain events are shown.
If set to true the view will include cells for days which contain no events.
CSS
DOM
Layout
Misc
Scrolling
Selection
State
Tree
Widget hierarchy
Functions
147
Functions
147Configuration
Events
Getters
Misc
Other
Rendering
Rows
Scrolling
Selection
Widget hierarchy
Events
58
Events
58Fires when this AgendaView refreshes.
// Adding a listener using the "on" method
agendaView.on('refresh', ({ source }) => {
});| Parameter | Type | Description |
|---|---|---|
source | AgendaView | The triggering instance. |
Fired when the date header stuck at the top of the view changes.
// Adding a listener using the "on" method
agendaView.on('topDateChange', ({ date }) => {
});| Parameter | Type | Description |
|---|---|---|
date | Date | The date which is at the top of the view |
Event handlers
58
Event handlers
58Called when this AgendaView refreshes.
new AgendaView({
onRefresh({ source }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | AgendaView | The triggering instance. |
Called when the date header stuck at the top of the view changes.
new AgendaView({
onTopDateChange({ date }) {
}
});| Parameter | Type | Description |
|---|---|---|
date | Date | The date which is at the top of the view |
Typedefs
18
Typedefs
18CSS variables
99
CSS variables
99| Name | Description |
|---|---|
--b-agenda-view-non-working-day-background | Non-working day background |
--b-agenda-view-cell-color | Cell color |
--b-agenda-view-cell-padding-inline | Cell padding inline |
--b-agenda-view-cell-padding-block | Cell padding block |
--b-agenda-view-date-width | Date width |
--b-agenda-view-time-width | Time width |
--b-agenda-view-time-width-small | Time width in small viewport |
--b-agenda-view-date-padding | Date padding |
--b-agenda-view-date-number-margin | Date number margin |
--b-agenda-view-date-number-font-size | Date number font size |
--b-agenda-view-today-date-number-font-size | Today date number font size |
--b-agenda-view-header-padding | Header padding |
--b-agenda-view-date-margin | Date margin |