EventList
Widget

A Grid view of the EventStore.

This shows a configured range of events from the event store.

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 EventList's header context menu is extended to allow the user to change the range type. This may be disabled by configuring the listRangeMenu as null.

For further information about features available to be configured directly into EventList calendar views, see the Grid documentation and the associated examples.

Useful configs

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

Configs

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

columns : Object<String, ColumnConfig>/ColumnConfig[]
Column definitions to add to the default columns, or column definitions which override the provided, default columns.

By default, the EventList shows three columns:
```
columns : [{
    text  : 'Name',
    field : 'name'
}, {
    text  : 'Start',
    field : 'startDate'
}, {
    text  : 'End',
    field : 'endDate'
}]
```
Your columns config is appended to the default columns unless you provide columns for the name, startDate and endDate fields, in which case your column definitions are merged into the default column definitions.

In this way you can provide a renderer for the default columns, or otherwise configure them in a customizable way.

You can also supply columns keyed by field, to reconfigure / remove / add similar to how you would manage items in containers and menus:
```
columns : {
  // Remove the name column
  name : null,
  // Change the format of the startDate column
  startDate : {
     format : 'YYYY'
  },
  // Add a description column
  description : {
     renderer : ({ record }) => record.description.substring(0, 10)
  }
}
```
eventListTimeFormat : String/FunctionHH:mm
A DateHelper format string/function used to format the time displayed next to event bars in the custom columns which EventList based views use - EventList and AgendaView.
Parameters
- date : Date
  
  The date to format.
Returns

String
:

The formatted date.
eventTimeRenderer : Function/String
A function, or name of a function in the ownership hierarchy which is used to create the time output next to event bars in an agenda cell.

The result of this function is used as the content of an element which has the CSS class 'b-cal-event-list-event-time'.
```
modes :
    agenda : {
        // Add extra info below the time.
        // We set .b-cal-event-list-event-time to flex-direction : column
        eventTimeRenderer({ eventRecord, date }) {
            return [
                this.defaultEventTimeRenderer({ eventRecord, date }),
                {
                    className : 'event-location',
                    text      : eventRecord.location
                }
            ];
        }
    }
}
```
Parameters
- eventRecord : EventModel
  
  The event record for which to create a time string.
- date : Date
  
  The date of the cell in which the event is being rendered.
Returns

String/DomConfig/DomConfig[]
Has a corresponding runtime eventTimeRenderer property.
listRangeMenu : RangeMenuConfig/null
A RangeMenu configuration block which configures the range choosing menu provided which by default selects one of the following:
- day
- week
- month
- year
- decade
This may be used to either reconfigure that menu, or, by configuring it as null, could remove the menu entirely if the date range of this view is controlled by other means.

The individual range menu items are under the items property and have the following property names:
- listRangeDayItem
- listRangeWeekItem
- listRangeMonthItem
- listRangeYearItem
- listRangeDecadeItem
These may be reconfigured:
```
calendar = new Calendar({
    ...
    modes : {
        agenda : {
            listRangeMenu : {
                items : {
                    // We don't want the decade range option
                    listRangeDecadeItem : null
                }
            }
        }
    }
});
```
Has a corresponding runtime listRangeMenu property.

Properties

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

isEventList : Booleantrue

READONLY

static

ADVANCED

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

eventTimeRenderer : Function/String

A function, or name of a function in the ownership hierarchy which is used to create the time output next to event bars in an agenda cell.

The result of this function is used as the content of an element which has the CSS class 'b-cal-event-list-event-time'.

modes :
    agenda : {
        // Add extra info below the time.
        // We set .b-cal-event-list-event-time to flex-direction : column
        eventTimeRenderer({ eventRecord, date }) {
            return [
                this.defaultEventTimeRenderer({ eventRecord, date }),
                {
                    className : 'event-location',
                    text      : eventRecord.location
                }
            ];
        }
    }
}

Has a corresponding eventTimeRenderer config.

listRangeMenu : RangeMenuConfig

READONLY
This property yields a RangeMenu configuration block which encapsulates the range choices which this widget may be set to encapsulate:
- day
- week
- month
- year
- decade
By default a list view adds these choices to the header context menu. An agenda view creates a floating settings button which offers this menu. The property may be used to create a custom UI for changing the range. The value yielded by the default get listRangeMenu() implementation looks like this:
```
{
    items : {
        listRangeDayItem    : {config for DAY range menu item },
        listRangWeekItem    : {config for WEEK range menu item },
        listRangMonthItem   : {config for MONTH range menu item },
        listRangeYearItem   : {config for YEAR range menu item },
        listRangeDecadeItem : {config for DECADE range menu item }
    }
}
```
A subclass can override get listRangeMenu() and mutate the object returned by the super call.

For example, it could delete properties of the items block to limit which ranges may be selected.

Has a corresponding listRangeMenu config.
resource : ResourceModel

READONLY

Returns the resource associated with this event list when used inside a ResourceView
isEventList : Booleantrue

READONLY

ADVANCED

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

Functions

Functions are methods available for calling on the class

agendaEventDateRenderer( date )
: DomConfig

This method produces the date details block in AgendaView cells as a DomConfig object.

The content is encapsulated in an element with CSS class b-cal-agenda-date.
changeMonth( )

Creates the Month utility object. We use it to track what week we are looking at.
defaultEventTimeRenderer( eventRecord, forDate )
: String

Produces the time details next to the event bar in EventList and AgendaView.

This may be called from a custom eventTimeRenderer function to produce the default time details.
eventListEventTimeRenderer( eventRecord, forDate )
: DomConfig

This method produces the event time details next to the event bar in EventList and AgendaView as a DomConfig object.

The content is encapsulated in an element with CSS class b-cal-event-list-event-time. For multi day events, the ending date is shown. For intra-day events, the start and end times are shown.
onCalendarStoreChange( )

This is added as a listener by the CalendarStores mixin.

Our store is chained off of the EventStore; refill it if the EventStore changes. The store will fire events which cause UI update. We must fire a refresh event so that the encapsulating Calendar view knows about this.
onMonthChange( )

When the date we have been told to look at changes, recalculate the date range. If the date range changes, this will cause a refill of our grid store from the master event store.
populateStoreSoon( )

private

This is called when our store needs to be repopulated from the eventStore
scrollTo( target, options )
: Promise

ASYNC

Scrolls vertically to bring an event or a time into view.
updateEventStore( )

When an EventStore arrives, chain off a slave store from that which we can then filter to only show the week we are focused upon.

CSS variables

CSS variables that can be set to adjust appearance

Name	Description
--b-event-list-day-selector-selected-date-background	Selected date's background color in the day selector
--b-event-list-day-selector-selected-date-color	Selected date's color in the day selector
--b-event-list-event-column-resource-row-gap	Gap between resource avatars

type: eventlist

Source path

Calendar/widget/EventList.js

Demo

examples/listview

EventList
Widget

Useful configs

See also

Configs

Parameters

Returns

Parameters

Returns

Properties

Functions

CSS variables

Source path

Demo

Inheritance tree7

Mixins19

Contents

EventList Widget

Useful configs

See also

Configs

Parameters

Returns

Parameters

Returns

Properties

Functions

CSS variables

Source path

Demo

Inheritance tree7

Mixins19

Contents

EventList
Widget