AgendaView
Widget

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.

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:

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);
                }
            }
        }
    }
}

Useful configs

Config	Description
range	Time range to display (e.g. `'year'`, `'month'`)
listRangeMenu	Menu for changing the displayed range
columns	Column definitions for the agenda grid
eventRenderer	Custom renderer for event bars

Configs

Configs are options you supply in a configuration object when creating an instance of this class

alwaysShowCurrentDate : Booleanfalse

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.

Has a corresponding runtime alwaysShowCurrentDate property.

columns : Object/Object[]{ agenda : { type : 'agendacolumn' } }

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);

dateFilter : Function/String
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.
Parameters
- context : DayCell
  
  Information about the day rows to be created.
Returns

Boolean
:

Return false to not display a rows for the passed date.
Has a corresponding runtime dateFilter property.
eventRowSpacing : Number/String8

The spacing between event bars in the default rendering of a day cell.
hideEventOverflow : Boolean

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.
offsetStartsBeforeEvents : Booleantrue

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.

Has a corresponding runtime offsetStartsBeforeEvents property.
settingsButton : ButtonConfig
The "Settings" button which is a floating button which offers the Agenda range selection menu
- actionKey : String
  
  The composed key name to press to open the settings menu. Default is 'CTRL+R'
Has a corresponding runtime settingsButton property.
showAllDates : Booleanfalse

By default, only dates which contain events are shown.

If set to true the view will include all dates in the configured range.

Has a corresponding runtime showAllDates property.
showEmptyDates : Booleanfalse

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.

Has a corresponding runtime showEmptyDates property.
hideHeaders : Booleantrue

Specify false to display column headers

Properties

Properties are getters/setters or publicly accessible variables on this class

isAgendaView : Booleantrue

READONLY

static

ADVANCED

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

alwaysShowCurrentDate : Booleanfalse

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.

Has a corresponding alwaysShowCurrentDate config.
cellMap : Map

READONLY

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.
dateFilter : Function/String

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.

Has a corresponding dateFilter config.
offsetStartsBeforeEvents : Booleantrue

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.

Has a corresponding offsetStartsBeforeEvents config.
resource : ResourceModel

READONLY

Returns the resource associated with this agenda view when used inside a ResourceView
settingsButton : ButtonConfig
The "Settings" button which is a floating button which offers the Agenda range selection menu
- actionKey : String
  
  The composed key name to press to open the settings menu. Default is 'CTRL+R'
Has a corresponding settingsButton config.
showAllDates : Booleanfalse

By default, only dates which contain events are shown.

If set to true the view will include all dates in the configured range.

Has a corresponding showAllDates config.
showEmptyDates : Booleanfalse

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.

Has a corresponding showEmptyDates config.
isAgendaView : Booleantrue

READONLY

ADVANCED

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

Functions

Functions are methods available for calling on the class

calculateRowTop( record )
: Number

private

Calculate the Y position of a row in the view accurately using the known event height and event row spacing and cell padding.

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

refresh

Fires when this AgendaView refreshes.
topDateChange

Fired when the date header stuck at the top of the view changes.

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onRefresh

Called when this AgendaView refreshes.
onTopDateChange

Called when the date header stuck at the top of the view changes.

CSS variables

CSS variables that can be set to adjust appearance

Name	Description
--b-agenda-view-cell-color	Cell color
--b-agenda-view-cell-padding-block	Cell padding block
--b-agenda-view-cell-padding-inline	Cell padding inline
--b-agenda-view-date-margin	Date margin
--b-agenda-view-date-number-font-size	Date number font size
--b-agenda-view-date-number-margin	Date number margin
--b-agenda-view-date-padding	Date padding
--b-agenda-view-date-width	Date width
--b-agenda-view-header-padding	Header padding
--b-agenda-view-non-working-day-background	Non-working day background
--b-agenda-view-time-width	Time width
--b-agenda-view-time-width-small	Time width in small viewport
--b-agenda-view-today-date-number-font-size	Today date number font size

AgendaView
Widget

Column renderer

Useful configs

See also

Configs

Parameters

Returns

Properties

Functions

Events

Event handlers

CSS variables

Source path

Inheritance tree8

Mixins19

Contents

AgendaView Widget

Column renderer

Useful configs

See also

Configs

Parameters

Returns

Properties

Functions

Events

Event handlers

CSS variables

Source path

Inheritance tree8

Mixins19

Contents

AgendaView
Widget