MonthGrid
Widget

A Panel which displays a grid of twelve month-event blocks. Each block representing a month of the year, contains a list of events for that month ordered according to the eventSorter configuration.

The events for a month are extracted from the Calendar's eventStore and loaded into twelve monthEventStores which may be configured using the monthEventStore configuration.

The months are rendered in a six by two grid, with each month block containing a header with the month name. The month blocks have a minimum width of 190 pixels. If available space makes a block narrower than this, the arrangement will fall back to the next logical arrangement, which is a four by three grid etc.

When the column count has changed, the columnCountChange event is fired.

Each month block will scroll vertically if the events in that month overflow the height of the block. Scroll bars may be hidden usinvg the hideEventScroll configuration.

The minMonthHeight configuration may be used to set a minimum height for every month block. If the month blocks overflow the height of the view's available space, the view will scroll.

Grouping

If grouping is configured on the monthEventStore, the group header records will be rendered as a single event bar with the group name and a count of the number of events in the group.

These records will be passed through the groupHeaderRenderer function to produce the group header content. By default, the group header bar will have the class b-cal-event-bar-group and the class b-cal-event-bar-collapsed if the group is collapsed. It will contain three elements:

A .b-cal-event-bar-name element containing the group name.
A .b-cal-event-bar-count element containing the count of the number of events in the group.
An icon element with the class b-fw-icon b-icon-group-expand or b-fw-icon b-icon-group-collapse depending on whether the group is collapsed or expanded.

The group header bar will have the aria-label attribute set to the group name and the count of the number of events in the group. The group header bar will also have the aria-expanded attribute set to true if the group is expanded, or false if the group is collapsed.

If grouping is done by resource, the group header bar will have the resource-id attribute set to the resource's id which will enable the resourceClick, resourceContextMenu and resourceDoubleClick etc events to be fired when the group header is intercted with.

If grouping is done by some other linked record, the group header bar will have the id of that record set in the data-attribute data-[modelType]-id where modelType is the class name of the linked record which can be accessed in a groupRecordClick handler.

Clicking on a group header will toggle the collapsed state of the group, and will fire the groupRecordClick event.

Drag/drop and autoCreate

Due to an event bar's position having no relationship to its start time, this view does not participate in the CalendarDrag feature, and does not support drag and drop of events.

For the same reason, this view does not support the autoCreate property that other Calendar views support.

Useful configs

Config	Description
monthEventStore	Config for the per-month event stores
minMonthHeight	Minimum height for each month block
hideEventScroll	Hide scrollbars on month event blocks
eventRenderer	Custom renderer for event bars

Configs

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

groupHeaderAriaMonthFormat : String'MMM YYYY'

The format used to create the month name in the aria-label of the group header of month event blocks.

Has a corresponding runtime groupHeaderAriaMonthFormat property.
groupHeaderRenderer : Function/String
A function or the name of a function in the view's ownership hierarchy which is used to produce the group header content for event groups in month blocks.

Your implementation may call defaultGroupHeaderRenderer to produce the default group header content and them mutate that content to suit your needs before returning that, or it may return any value HTML string or an array of DomConfig objects to be used as the group header content.

By default, a group header event bar will be rendered with the group name, a count of the number of events in the group and an icon indicating whether the group is collapsed or expanded. The group header will have the class b-cal-event-bar-group and the class b-cal-event-bar-collapsed if the group is collapsed.
Parameters
- detail : Object
  
  An object containing the details for rendering the group header.
- view : MonthGrid
  
  The MonthGrid instance.
- eventRecord : Model
  
  The event group record.
- renderData : Object
  
  A data object containing properties that will be used to create the event element
- style : Object
  
  The style property is an object containing style properties for the event element
- cls : Object
  
  The cls property is an object whose property names will be added to the event element if the property value is truthy
- iconStyle : Object
  
  The iconStyle property is an object containing style properties for the icon element if an icon element is to be used
- iconCls : Object
  
  The iconCls property is an object whose property names will be added to the icon element. Initially set from the event record's iconCls. Can be mutated by the renderer. If null, or no properties are set, no icon will be rendered
- eventColor : String
  
  Color to be applied to the event
- dataset : Object
  
  An object which produces the dataset of the resulting event bar
Returns

DomConfig/DomConfig[]/String/null
:

The content to be used for the group header body.
headerMonthFormat : String'MMM'

The format used to display the month name in the month header of month event blocks.

Has a corresponding runtime headerMonthFormat property.
hideEventScroll : Booleanfalse

If true, and the platform shows scrollbars, the vertical scrollbar indicating overflowing events in a month block is hidden.

When overflowing, a month container element (class name 'b-cal-event-bar-container') will have the class 'b-cal-event-container-overflow-top' and/or 'b-cal-event-container-overflow-bottom' added to it, indicating the edge(s) which overflow.

This is useful for touch devices where scrollbars are not shown, but the user can still scroll the month container to see more events. By default a small gradient is shown at the top and bottom of the month container to indicate that there are more events to see.
minMonthHeight : Number/String

The minimum height of each month block. If the month blocks overflow the height of the view's available space, the view will scroll.

Has a corresponding runtime minMonthHeight property.
monthEventStore : StoreConfig

A Store configuration block which is used to create the twelve stores which hold the events for each month displayed.

The Stores may be accessed using the monthEventStores property.

The Stores are created with the modelClass of the eventStore of the Calendar.

Mutating the value of this property will cause the existing monthEventStores to be recreated. This will cause the view to refresh.
monthHeaderRenderer : Function/String
A function, or the name of a function in the view's ownership hierarchy, which is used to produce the month header content for month event blocks.

An implementation may call the defaultMonthHeaderRenderer method to get the default DomConfig array and mutate the result before returning it:
```
monthHeaderRenderer({ monthEventCount }) {
    // Get the default pair of element configs, month name end event count
    const result = this.defaultMonthHeaderRenderer(...arguments);
    // Replace the text property of the event count element with HTML containing an icon
    result[1].html = `${monthEventCount} <i class="fa fa-external-link"></i>`;
    delete result[1].text;
    return result;
}
```
Parameters
- context : Object
  
  An object containing the context for rendering the month header
- view : MonthGrid
  
  The MonthGrid instance
- month : Month
  
  The month object
- monthEventCount : Number
  
  The number of events in the month
- monthEventStore : Store
  
  The month event store
Returns

DomConfig/DomConfig[]/String/null
:

The content to be used for the month header
timeFormat : String'MMM DD YYYY HH:mm'

The format used to display the date and time of events in EventTooltip tooltips.

Has a corresponding runtime timeFormat property.
viewGap : String/Number

The space to leave between each month group. Defaults to no gap.

Has a corresponding runtime viewGap property.

Properties

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

isMonthGrid : Booleantrue

READONLY

static

ADVANCED

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

groupHeaderAriaMonthFormat : String'MMM YYYY'

The format used to create the month name in the aria-label of the group header of month event blocks.

Has a corresponding groupHeaderAriaMonthFormat config.
headerMonthFormat : String'MMM'

The format used to display the month name in the month header of month event blocks.

Has a corresponding headerMonthFormat config.
minMonthHeight : Number/String

The minimum height of each month block. If the month blocks overflow the height of the view's available space, the view will scroll.

Has a corresponding minMonthHeight config.
monthEventStores : Store[]

READONLY

Returns the twelve Stores which hold the events for each month displayed in this MonthGrid. Each Store is created with the modelClass of the eventStore of the Calendar. The Stores are created using the monthEventStore configuration.
timeFormat : String'MMM DD YYYY HH:mm'

The format used to display the date and time of events in EventTooltip tooltips.

Has a corresponding timeFormat config.
viewGap : String/Number

The space to leave between each month group. Defaults to no gap.

Has a corresponding viewGap config.
isMonthGrid : Booleantrue

READONLY

ADVANCED

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

Functions

Functions are methods available for calling on the class

defaultGroupHeaderRenderer( detail )
: DomConfig[]
The default group header renderer function

This function is used to render the group header for event groups in month blocks if no groupHeaderRenderer is configured. It will return a three element array of DomConfig objects containing:
- A .b-cal-event-bar-name element containing the group name.
- A .b-cal-event-bar-count element containing the count of the number of events in the group.
- An icon element with the class b-fw-icon b-icon-group-expand or b-fw-icon b-icon-group-collapse depending on whether the group is collapsed or expanded. The group header will have the class b-cal-event-bar-group and the class b-cal-event-bar-collapsed if the group is collapsed.
Your configured groupHeaderRenderer may call this to gain access to the default content and mutate the value.
defaultMonthHeaderRenderer( detail )
: DomConfig[]
The default month header renderer function.

This function is used to render the header for each month block in the MonthGrid if no monthHeaderRenderer is configured. It returns an array of two DomConfig objects:
- The first object represents the month name, with the class b-month-grid-month-header-month-name and the formatted month name as text.
- The second object represents the event count, with the class b-month-grid-month-header-event-count and the localized event count as text.
You may call this function from your custom monthHeaderRenderer to obtain the default content and then modify or extend it as needed.

Events

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

columnCountChange

Fires when the number of columns in the MonthGrid changes. This happens when the width of the MonthGrid changes.
groupRecordClick

PREVENTABLE

Fires when a group record is clicked, before its expanded/collapsed state is toggled.
groupRecordContextMenu

Fires when a group record is right clicked.
groupRecordDblClick

Fires when a group record is double clicked.
groupRecordMouseOut

Fires when a group record is mouseouted.
groupRecordMouseOver

Fires when a group record is mousovered.
refresh

Fires when this MonthGrid refreshes.
resourceClick

Fires when an event group header is clicked if the monthEventStore is configured to group events by resource.

Event handlers

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

onColumnCountChange

Called when the number of columns in the MonthGrid changes. This happens when the width of the MonthGrid changes.
onGroupRecordClick

PREVENTABLE

Called when a group record is clicked, before its expanded/collapsed state is toggled.
onGroupRecordContextMenu

Called when a group record is right clicked.
onGroupRecordDblClick

Called when a group record is double clicked.
onGroupRecordMouseOut

Called when a group record is mouseouted.
onGroupRecordMouseOver

Called when a group record is mousovered.
onRefresh

Called when this MonthGrid refreshes.
onResourceClick

Called when an event group header is clicked if the monthEventStore is configured to group events by resource.

CSS variables

CSS variables that can be set to adjust appearance

Name	Description
--b-month-grid-event-container-background-color	Event container background color (within each month)
--b-month-grid-event-group-active-expand-icon-color	Event group active expand icon color. This is used when grouping events in the month grid.
--b-month-grid-event-group-background-color	Event group background color. This is used when grouping events in the month grid.
--b-month-grid-event-group-border-color	Event group border color. This is used when grouping events in the month grid.
--b-month-grid-event-group-border-radius	Event group border radius. This is used when grouping events in the month grid.
--b-month-grid-event-group-expand-icon-color	Event group expand icon color. This is used when grouping events in the month grid. The icon is used to expand/collapse the event group.
--b-month-grid-month-background-color	Month background color
--b-month-grid-month-header-background	Month header background
--b-month-grid-month-header-color	Month header text color
--b-month-grid-month-header-hover-background	Month header hover background

type: monthgrid

Source path

Calendar/widget/MonthGrid.js

Demo

examples/monthgrid

MonthGrid
Widget

Grouping

Drag/drop and autoCreate

Useful configs

See also

Configs

Parameters

Returns

Parameters

Returns

Properties

Functions

Events

Event handlers

CSS variables

Source path

Demo

Inheritance tree6

Mixins11

Contents

MonthGrid Widget

Grouping

Drag/drop and autoCreate

Useful configs

See also

Configs

Parameters

Returns

Parameters

Returns

Properties

Functions

Events

Event handlers

CSS variables

Source path

Demo

Inheritance tree6

Mixins11

Contents

MonthGrid
Widget