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.

Calendar agenda view
//<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:

Agenda view
//<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

Common

dataGridBase
emptyTextGridBase
featuresGridBase
keyMapGridBase
listenersEvents
rowHeightGridBase
storeGridBase

Misc

hideHeaders: Boolean= true

Specify false to display column headers

cellEllipsisGridBase
columnLinesGridBase
dataFieldWidget
destroyStoreGridBase
disabledWidget
enableStickyGridBase
enableUndoRedoKeysGridElementEvents
hideFootersGridBase
hoverClsGridElementEvents
iconPanel
localeClassLocalizable
localizableLocalizable
longPressTimeGridElementEvents
maskDefaultsGridBase
maskedWidget
ownerWidget
pluginsPluggable
readOnlyGridBase
refWidget
responsiveLevelsGridResponsive
rippleWidget
rowLinesGridBase
showDirtyGridBase
tabWidget
titlePanel
tooltipWidget

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.

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 | StringAlso a property

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.

ParameterTypeDescription
contextDayCell

Information about the day rows to be created.

Returns: Boolean -

Return false to not display a rows for the passed date.

eventRowSpacing: Number | String= 8

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

ParameterTypeDescription
actionKeyString

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.

activationKeyCalendarMixin
allowDragCreateCalendarMixin
allowDragMoveCalendarMixin
allowDragResizeCalendarMixin
animateTimeShiftCalendarMixin
autoCreateCalendarMixin
columnWidget
dateDateRangeOwner
defaultFocusContainer
descriptionRendererCalendarMixin
dragUnitCalendarMixin
drawerPanel
endDateDateRangeOwner
eventFilterDayCellCollecter
eventHeightCalendarMixin
eventSorterCalendarMixin
extendAllDayEndDayCalendarMixin
fixedDurationDateRangeOwner
hideNonWorkingDaysCalendarMixin
labelPositionContainer
listRangeMenuEventList
maxDateCalendarMixin
minDateCalendarMixin
nonWorkingDaysCalendarMixin
pastEventClsCalendarMixin
rangeDateRangeOwner
renditionContainer
resourceImagePathCalendarMixin
responsiveResponsive
responsiveRootResponsive
responsiveStateResponsive
rtlRTL
selectorButtonCalendarMixin
selectorMenuItemCalendarMixin
shiftIncrementDateRangeOwner
shortDateFormatCalendarMixin
shortDateTimeFormatCalendarMixin
shortEventClsCalendarMixin
shortEventDurationCalendarMixin
showBulletCalendarMixin
showResourceAvatarsCalendarMixin
spanWidget
stackMultiDayEventsDayCellCollecter
startDateDateRangeOwner
stateSettingsGridState
syncCalendarDateCalendarMixin
syncViewDateCalendarMixin
timeFormatCalendarMixin
transitionGridBase
weekStartDayCalendarMixin

Accessibility

ariaLabelWidget

Content

bbarPanel
defaultsContainer
footerPanel
headerPanel
itemsContainer
lazyItemsContainer
namedItemsContainer
stripsPanel
tbarPanel
textContentContainer
toolsPanel

CSS

bodyClsPanel
borderContainer
clsWidget
colorWidget
htmlClsWidget
itemClsContainer
styleWidget
uiPanel

DOM

adoptWidget
appendToWidget
contentWidget
datasetWidget
htmlWidget
idWidget
tagWidget

Float & align

alignWidget
anchorWidget
centeredWidget
draggableWidget
floatingWidget
xWidget
yWidget

Layout

alignSelfWidget
autoHeightGridBase
dockWidget
flexWidget
getRowHeightGridBase
heightWidget
hiddenWidget
hideWhenEmptyContainer
layoutContainer
layoutStyleContainer
marginWidget
maxHeightWidget
maxWidthWidget
minHeightGridBase
minWidthWidget
textAlignWidget
weightWidget
widthWidget

Masking

loadMaskLoadMaskable
loadMaskDefaultsLoadMaskable
loadMaskErrorLoadMaskable
syncMaskLoadMaskable

misc

tabBarItemsContainer

Record

recordContainer

Scrolling

scrollableGridBase

Selection

selectionModeGridSelection

State

stateIdState

Tree

Properties

189

Common

columnsGridBase
dataGridBase
emptyTextGridBase
featuresGridFeatures
rowHeightGridBase
storeGridBase
subGridsGridSubGrids

Class hierarchy

isAgendaView: Boolean= truereadonly
Identifies an object as an instance of AgendaView class, or subclass thereof.
isAgendaView: Boolean= truereadonlystatic
Identifies an object as an instance of AgendaView class, or subclass thereof.
isCalendarMixinCalendarMixin
isContainerContainer
isDateRangeOwnerDateRangeOwner
isDayCellCollecterDayCellCollecter
isDelayableDelayable
isEventListEventList
isEventsEvents
isGridGrid
isGridBaseGridBase
isGridElementEventsGridElementEvents
isGridFeaturesGridFeatures
isGridResponsiveGridResponsive
isGridSelectionGridSelection
isGridStateGridState
isGridSubGridsGridSubGrids
isKeyMapKeyMap
isLoadMaskableLoadMaskable
isLocalizableLocalizable
isPanelPanel
isPluggablePluggable
isResponsiveResponsive
isStateState
isToolableToolable
isWidgetWidget

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.

cellMap: Mapreadonly

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 | StringAlso a config

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.

ParameterTypeDescription
contextDayCell

Information about the day rows to be created.

Returns: Boolean -

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

ParameterTypeDescription
actionKeyString

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.

$namestaticWidget
allowDragCreateCalendarMixin
allowDragMoveCalendarMixin
allowDragResizeCalendarMixin
animateTimeShiftCalendarMixin
autoCreateCalendarMixin
columnWidget
dateDateRangeOwner
dayCellClsCalendarMixin
dragUnitCalendarMixin
durationCalendarMixin
endDateDateRangeOwner
eventCountCalendarMixin
extendAllDayEndDayCalendarMixin
firstItemContainer
firstVisibleCellCalendarMixin
firstVisibleDateCalendarMixin
fixedDurationDateRangeOwner
hasChangesContainer
hideNonWorkingDaysCalendarMixin
isValidContainer
itemsContainer
labelPositionContainer
lastItemContainer
lastVisibleCellCalendarMixin
lastVisibleDateCalendarMixin
listRangeMenuEventList
maxDateCalendarMixin
minDateCalendarMixin
modeNameCalendarMixin
nonWorkingDaysCalendarMixin
pastEventClsCalendarMixin
rangeDateRangeOwner
renditionContainer
rtlRTL
shiftIncrementDateRangeOwner
shortDateFormatCalendarMixin
shortDateTimeFormatCalendarMixin
spanWidget
stackMultiDayEventsDayCellCollecter
startDateDateRangeOwner
stateSettingsGridState
stepUnitCalendarMixin
syncCalendarDateCalendarMixin
syncViewDateCalendarMixin
toolsPanel
transitionGridBase
typestaticWidget
valuesContainer
visibleCellSelectorCalendarMixin

Accessibility

keyMapKeyMap

Content

bbarPanel
tbarPanel

CSS

clsWidget

DOM

appendToWidget
contentWidget
datasetWidget
elementWidget
htmlWidget
idWidget
styleWidget

Float & align

xWidget
yWidget

Layout

alignSelfWidget
bodyHeightGridBase
flexWidget
footerHeightGridBase
headerHeightGridBase
heightWidget
layoutContainer
layoutStyleContainer
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
widthWidget

Lifecycle

configBase

Misc

cellEllipsisGridBase
cellInfoWidget
columnLinesGridBase
disabledWidget
enableUndoRedoKeysGridElementEvents
hideFootersGridBase
hideHeadersGridBase
hoveredCellGridElementEvents
localeHelperLocalizable
localeManagerLocalizable
longPressTimeGridElementEvents
pluginsPluggable
readOnlyGridBase
refWidget
responsiveLevelGridResponsive
rowLinesGridBase
tabWidget
titlePanel
tooltipWidget

Record

recordContainer

Rows

Scrolling

Selection

selectedCellGridSelection
selectedCellsGridSelection
selectedRecordGridSelection
selectedRecordsGridSelection
selectedRowsGridSelection
selectionModeGridSelection

State

stateGridState

Tree

Visibility

hiddenWidget
isVisibleWidget

Widget hierarchy

ownerWidget
parentWidget
widgetMapContainer

Functions

147

Configuration

applyDefaultsstaticBase

Events

Float & align

alignToWidget
setXYWidget
showByWidget
toFrontWidget

Getters

getCellGridBase

Lifecycle

createstaticWidget
destroystaticBase
initClassstaticWidget

Misc

addPluginsPluggable
attachTooltipstaticWidget
fromElementstaticWidget
fromSelectorstaticWidget
getByIdstaticWidget
getPluginPluggable
hasFeatureGridFeatures
hasPluginPluggable
isOfTypeNamestaticBase
maskBodyGridBase
mixinstaticBase
optionalLstaticLocalizable
unmaskBodyGridBase

Other

addContainer
calendarHitTestCalendarMixin
changeMonthEventList
composeWidget
createEventCalendarMixin
createOnFrameDelayable
disableWidget
enableWidget
focusWidget
getAtContainer
getDayElementCalendarMixin
getEventElementCalendarMixin
getEventElementsCalendarMixin
getEventRecordCalendarMixin
getResourceRecordCalendarMixin
getTimeRangesCalendarMixin
getWidgetByIdContainer
insertContainer
isTodayCalendarMixin
LstaticLocalizable
maskWidget
nextCalendarMixin
onEvents
onEventCreatedCalendarMixin
onMonthChangeEventList
previousCalendarMixin
recomposeWidget
refreshCalendarMixin
refreshSoonCalendarMixin
relayAllEvents
removeContainer
removeAllContainer
resetValuesContainer
resolveEventRecordCalendarMixin
scrollToEventList
setValuesContainer
triggerEvents
unEvents
unmaskWidget

Rendering

refreshRowGridBase
refreshRowsGridBase
renderRowsGridBase

Rows

getRowForGridBase

Scrolling

scrollToTopGridBase
storeScrollGridBase

Selection

deselectAllGridSelection
deselectCellGridSelection
deselectCellsGridSelection
deselectRowGridSelection
deselectRowsGridSelection
isCellSelectedGridSelection
isSelectableGridSelection
isSelectedGridSelection
selectAllGridSelection
selectCellGridSelection
selectCellRangeGridSelection
selectCellsGridSelection
selectRangeGridSelection
selectRowGridSelection
selectRowsGridSelection

State

SubGrid

getSubGridGridSubGrids

Visibility

hideWidget
showWidget

Widget hierarchy

closestWidget
containsWidget
ownsWidget
queryWidget
queryAllWidget
upWidget

Events

58

Fires when this AgendaView refreshes.

// Adding a listener using the "on" method
agendaView.on('refresh', ({ source }) => {

});
ParameterTypeDescription
sourceAgendaView

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 }) => {

});
ParameterTypeDescription
dateDate

The date which is at the top of the view

beforeAutoCreateCalendarMixin
beforeChangeDateCalendarMixin
catchAllEvents
cellClickGridElementEvents
cellContextMenuGridElementEvents
cellDblClickGridElementEvents
cellMapPopulatedDayCellCollecter
cellMouseEnterGridElementEvents
cellMouseLeaveGridElementEvents
cellMouseOutGridElementEvents
cellMouseOverGridElementEvents
dataChangeGridBase
dayCellPopulatedDayCellCollecter
destroyEvents
dragSelectingGridSelection
eventAutoCreatedCalendarMixin
eventPropagateDayCellCollecter
expandPanel
focusInWidget
focusOutWidget
headerClickGridElementEvents
hideWidget
mouseOutGridElementEvents
mouseOverGridElementEvents
paintWidget
rangeChangeDateRangeOwner
readOnlyWidget
recomposeWidget
renderRowGridBase
renderRowsGridBase
resizeWidget
responsiveGridResponsive
rowMouseEnterGridElementEvents
rowMouseLeaveGridElementEvents
scrollGridBase
selectionChangeGridSelection
selectionModeChangeGridSelection
shiftIncrementChangeDateRangeOwner
showWidget

Event handlers

58

Called when this AgendaView refreshes.

new AgendaView({
    onRefresh({ source }) {

    }
});
ParameterTypeDescription
sourceAgendaView

The triggering instance.

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

new AgendaView({
    onTopDateChange({ date }) {

    }
});
ParameterTypeDescription
dateDate

The date which is at the top of the view

onBeforeAutoCreateCalendarMixin
onBeforeChangeDateCalendarMixin
onCellClickGridElementEvents
onCellContextMenuGridElementEvents
onCellDblClickGridElementEvents
onCellMapPopulatedDayCellCollecter
onCellMouseEnterGridElementEvents
onCellMouseLeaveGridElementEvents
onCellMouseOutGridElementEvents
onCellMouseOverGridElementEvents
onDataChangeGridBase
onDayCellPopulatedDayCellCollecter
onDestroyEvents
onDragSelectingGridSelection
onEventAutoCreatedCalendarMixin
onEventPropagateDayCellCollecter
onFocusInWidget
onHeaderClickGridElementEvents
onHideWidget
onMouseOutGridElementEvents
onMouseOverGridElementEvents
onPaintWidget
onRangeChangeDateRangeOwner
onRenderRowGridBase
onRenderRowsGridBase
onResizeWidget
onResponsiveGridResponsive
onRowMouseEnterGridElementEvents
onRowMouseLeaveGridElementEvents
onScrollGridBase
onSelectionChangeGridSelection
onShowWidget

Typedefs

18

CSS variables

99