EventList

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

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.

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

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

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

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.

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

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.

Creates the Month utility object. We use it to track what week we are looking at.

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.

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.

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.

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.

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

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.