/**
 * React wrapper for Bryntum MonthGrid
 */
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import React, { RefObject } from 'react';
import { AlignSpec, Base, BryntumScrollOptions, ButtonConfig, CalendarView, Container, ContainerItemConfig, ContainerLayoutConfig, DayCell, DomConfig, EventBar, EventModel, KeyMapConfig, Layout, MaskConfig, MenuItemConfig, MenuItemEntry, Model, Month, MonthGrid, MonthGridListeners, OverflowPopup, OverflowPopupConfig, PagingToolbarConfig, Panel, PanelCollapserConfig, PanelCollapserOverlayConfig, PanelHeader, Rectangle, ResourceModel, Scroller, StateProvider, Store, StoreConfig, TabConfig, Tool, ToolConfig, ToolbarConfig, ToolbarItems, TooltipConfig, Widget } from '@bryntum/calendar';

import { createWidget, shouldComponentUpdate, processWidgetContent } from './WrapperHelper.js';

export type BryntumMonthGridProps = {
    // Configs
    /**
     * A key to use to activate this view.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-activationKey)
     */
    activationKey? : string
    /**
     * Element (or element id) to adopt as this Widget's encapsulating element. The widget's
     * content will be placed inside this element.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-adopt)
     */
    adopt? : HTMLElement|string
    /**
     * *Only valid if this Widget is [floating](https://bryntum.com/products/calendar/docs/api/Core/widget/Widget#config-floating).*
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-align)
     */
    align? : AlignSpec|string
    /**
     * When this widget is a child of a [Container](https://bryntum.com/products/calendar/docs/api/Core/widget/Container), it will by default be participating in a
     * flexbox layout. This config allows you to set this widget's
     * [align-self](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) style.
     */
    alignSelf? : string
    /**
     * *Only valid if this Widget is [floating](https://bryntum.com/products/calendar/docs/api/Core/widget/Widget#config-floating) and being shown through [showBy](#Core/widget/Widget#function-showBy).*
     * `true` to show a connector arrow pointing to the align target.
     */
    anchor? : boolean
    /**
     * By default, when navigating through time, the next time
     * block will be animated in from the appropriate direction.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-animateTimeShift)
     */
    animateTimeShift? : boolean
    /**
     * Element (or the id of an element) to append this widget's element to. Can be configured, or set once at
     * runtime. To access the element of a rendered widget, see [element](https://bryntum.com/products/calendar/docs/api/Core/widget/Widget#property-element).
     */
    appendTo? : HTMLElement|string
    /**
     * A localizable string (May contain `'L{}'` tokens which resolve in the locale file) to inject
     * into an element which will be linked using the `aria-describedby` attribute.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-ariaDescription)
     */
    ariaDescription? : string
    /**
     * A localizable string (May contain `'L{}'` tokens which resolve in the locale file) to inject as
     * the `aria-label` attribute.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-ariaLabel)
     */
    ariaLabel? : string
    /**
     * A Config object representing the configuration of a [Toolbar](https://bryntum.com/products/calendar/docs/api/Core/widget/Toolbar),
     * or array of config objects representing the child items of a Toolbar. Another way to add a bbar is to use [strips](https://bryntum.com/products/calendar/docs/api/Core/widget/Panel#config-strips).
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-bbar)
     */
    bbar? : (ContainerItemConfig|string)[]|ToolbarConfig|PagingToolbarConfig|null
    /**
     * Custom CSS classes to add to the panel's body element.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-bodyCls)
     */
    bodyCls? : string|object
    /**
     * An object where property names with a truthy value indicate which events should bubble up the ownership
     * hierarchy when triggered.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-bubbleEvents)
     */
    bubbleEvents? : object
    /**
     * Set to `false` to not call onXXX method names (e.g. `onShow`, `onClick`), as an easy way to listen for events.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-callOnFunctions)
     */
    callOnFunctions? : boolean
    /**
     * By default, if an event handler throws an exception, the error propagates up the stack and the
     * application state is undefined. Code which follows the event handler will *not* be executed.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-catchEventHandlerExceptions)
     */
    catchEventHandlerExceptions? : boolean
    /**
     * *Only valid if this Widget is [floating](https://bryntum.com/products/calendar/docs/api/Core/widget/Widget#config-floating).*
     * Set to `true` to centre the Widget in browser viewport space.
     */
    centered? : boolean
    /**
     * Custom CSS classes to add to element.
     * May be specified as a space separated string, or as an object in which property names
     * with truthy values are used as the class names:
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-cls)
     */
    cls? : string|object
    /**
     * Controls whether the panel is collapsed (the body of the panel is hidden while only the header is
     * visible). Only valid if the panel is [collapsible](https://bryntum.com/products/calendar/docs/api/Core/widget/Panel#config-collapsible).
     */
    collapsed? : boolean
    /**
     * This config enables collapsibility for the panel. See [collapsed](https://bryntum.com/products/calendar/docs/api/Core/widget/Panel#config-collapsed).
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-collapsible)
     */
    collapsible? : boolean|PanelCollapserConfig|PanelCollapserOverlayConfig
    /**
     * Applies the specified color to the widget, by setting the `--b-primary` CSS variable in the widgets
     * `style` block.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-color)
     */
    color? : string
    /**
     * Programmatic control over which column to start in when used in a grid layout.
     */
    column? : number
    config? : object
    /**
     * *Only valid if this Widget is [floating](https://bryntum.com/products/calendar/docs/api/Core/widget/Widget#config-floating) or [positioned](#Core/widget/Widget#config-positioned).*
     * Element, Widget or Rectangle to which this Widget is constrained.
     */
    constrainTo? : HTMLElement|Widget|Rectangle
    /**
     * Custom CSS classes to add to the [contentElement](https://bryntum.com/products/calendar/docs/api/Core/widget/Widget#property-contentElement).
     * May be specified as a space separated string, or as an object in which property names
     * with truthy values are used as the class names:
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-contentElementCls)
     */
    contentElementCls? : string|object
    /**
     * When this Widget configuration is used in the Grid's RowExpander feature's `widget` config, provide the
     * field on the expanded record to use for populating this widget's store (if applicable)
     */
    dataField? : string
    /**
     * Object to apply to elements dataset (each key will be used as a data-attribute on the element)
     */
    dataset? : Record<string, string>
    /**
     * A date which specifies the year to display. All types of calendar view have a `date`
     * config which they use to set their visible date range according to their configuration
     * and type.
     */
    date? : Date
    /**
     * A [DateHelper](https://bryntum.com/products/calendar/docs/api/Core/helper/DateHelper) format string/function to use to create date output for view descriptions.
     * @param {Date} date The date to format.
     * @returns {string} The formatted date.
     */
    dateFormat? : string|((date: Date) => string)
    /**
     * A string used to separate start and end dates in the [descriptionFormat](https://bryntum.com/products/calendar/docs/api/Scheduler/view/mixin/Describable#config-descriptionFormat).
     */
    dateSeparator? : string
    /**
     * The [DateHelper](https://bryntum.com/products/calendar/docs/api/Core/helper/DateHelper) format string/function to format the day names
     * in the header part of each calendar cell.
     * @param {Date} date The date to format.
     * @returns {string} The formatted date.
     */
    dayCellNameFormat? : string|((date: Date) => string)
    /**
     * The name of the property to set when a single value is to be applied to this Widget. Such as when used
     * in a grid WidgetColumn, this is the property to which the column's `field` is applied.
     */
    defaultBindProperty? : string
    /**
     * A [query](https://bryntum.com/products/calendar/docs/api/Core/widget/Container#function-query) selector function which can identify the descendant widget to which
     * focus should be directed by default.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-defaultFocus)
     * @param {Core.widget.Widget} widget Widget passed to method
     * @returns {boolean} truthy value if widget is the default one
     */
    defaultFocus? : ((widget: Widget) => boolean)|string
    /**
     * A config object containing default settings to apply to all child widgets.
     */
    defaults? : ContainerItemConfig
    /**
     * Options to add into scroll options when the [scrollTo](https://bryntum.com/products/calendar/docs/api/Calendar/widget/mixin/CalendarMixin#function-scrollTo) method is called.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-defaultScrollOptions)
     */
    defaultScrollOptions? : BryntumScrollOptions
    /**
     * The date format used by the default [descriptionRenderer](https://bryntum.com/products/calendar/docs/api/Scheduler/view/mixin/Describable#config-descriptionRenderer) for rendering the view's description.
     * If this value is `null`, the [dateFormat](https://bryntum.com/products/calendar/docs/api/Scheduler/view/mixin/Describable#config-dateFormat) (and potentially [dateSeparator](#Scheduler/view/mixin/Describable#config-dateSeparator)) will
     * be used.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-descriptionFormat)
     * @param {Date} date The date to format.
     * @returns {string} The formatted date.
     */
    descriptionFormat? : string|string[]|boolean[]|((date: Date) => string)|Function[]
    /**
     * A function that provides the textual description for this view. If provided, this function overrides the
     * [descriptionFormat](https://bryntum.com/products/calendar/docs/api/Scheduler/view/mixin/Describable#config-descriptionFormat).
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-descriptionRenderer)
     * @param {Core.widget.Widget} view The active view in case the function is in another scope.
     * @returns {string} Description string
     */
    descriptionRenderer? : (view: Widget) => string
    /**
     * Check for CSS compatibility issues when upgrading to v7. Performs the following checks:
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-detectCSSCompatibilityIssues)
     */
    detectCSSCompatibilityIssues? : boolean
    /**
     * Disable or enable the widget. It is similar to [readOnly](https://bryntum.com/products/calendar/docs/api/Core/widget/Widget#config-readOnly) except a disabled widget
     * cannot be focused, uses a different rendition (usually greyish) and does not allow selecting its value.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-disabled)
     */
    disabled? : boolean|'inert'
    /**
     * Controls the placement of this widget when it is added to a [panel's ](https://bryntum.com/products/calendar/docs/api/Core/widget/Panel)
     * [strips collection](https://bryntum.com/products/calendar/docs/api/Core/widget/Panel#config-strips). Typical values for this config are `'top'`,
     * `'bottom'`, `'left'`, or `'right'`, which cause the widget to be placed on that side of the panel's
     * body. Such widgets are called "edge strips".
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-dock)
     */
    dock? : 'top'|'bottom'|'left'|'right'|'start'|'end'|'header'|'pre-header'|object
    /**
     * *Only valid if this Widget is [floating](https://bryntum.com/products/calendar/docs/api/Core/widget/Widget#config-floating).*
     * Set to `true` to be able to drag a widget freely on the page. Or set to an object with a ´handleSelector´
     * property which controls when a drag should start.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-draggable)
     */
    draggable? : boolean|{
        handleSelector?: string
    }
    /**
     * Make this Panel a docked drawer which slides out from one side of the browser viewport by default.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-drawer)
     * @param {'start','left','end','right','top','bottom'} side The side of the viewport to dock the drawer to.  * `'start'` means the `inline-start` side. * `'end'` means the `inline-end` side.
     * @param {string,number} size The size of the drawer in its collapsible axis.
     * @param {boolean} inline If using the [appendTo](https://bryntum.com/products/calendar/docs/api/Core/widget/Panel#config-appendTo) config to place the drawer inside a host widget, this may be set to `true` to make the drawer inline within that host. Note that, if using this, the layout of the host element must have `flex-direction` set appropriately.
     * @param {boolean,object} autoClose Specifies what user actions should automatically close the drawer. Defaults to closing when the user clicks outside of the drawer or when focus moves outside of the drawer.
     * @param {boolean,string} autoClose.mousedown If the user clicks outside of the drawer, the drawer will automatically be hidden. If the value is a string, it is used as a CSS selector to filter clicks which should close the drawer.
     * @param {boolean,string} autoClose.focusout If focus moves outside of the drawer, the drawer will automatically be hidden.
     * @param {string} autoClose.mouseout Hides the drawer when the mouse leaves the drawer after the `autoCloseDelay` period.
     * @param {number} autoCloseDelay When using `mouseout`, this is the delay in milliseconds
     */
    drawer? : boolean|{side?: 'start'|'left'|'end'|'right'|'top'|'bottom', size?: string|number, inline?: boolean, autoClose: { mousedown?: boolean|string, focusout?: boolean|string, mouseout?: string }, autoCloseDelay?: number}
    /**
     * An object specifying attributes to assign to the root element of this widget.
     * Set `null` value to attribute to remove it.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-elementAttributes)
     */
    elementAttributes? : Record<string, string|null>
    /**
     * A [DomConfig](https://bryntum.com/products/calendar/docs/api/Core/helper/DomHelper#typedef-DomConfig) object which will be used to create the content of a clickable
     * element which is present when no events are in a cell.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-emptyCellRenderer)
     * @param {DayCell} dayCellRenderer A `DayCell` object that contains data about the cell.
     * @returns {DomConfig,void} DomConfig object representing the HTML markup
     */
    emptyCellRenderer? : ((dayCellRenderer: DayCell) => DomConfig|void)|object|string
    /**
     * A function, or the name of a function in the ownership hierarchy to filter which events
     * are collected into the day cell data blocks.
     * Return `true` to include the passed event, or a *falsy* value to exclude the event.
     * @param {Scheduler.model.EventModel} event the passed event
     * @returns {boolean}
     */
    eventFilter? : ((event: EventModel) => boolean)|string
    /**
     * A function, or the name of a function in the ownership hierarchy which you
     * can specify to customize event DOM content.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-eventHeaderRenderer)
     * @param {object} detail An object that contains data about the event being rendered
     * @param {CalendarView} detail.view The view rendering the event
     * @param {Scheduler.model.EventModel} detail.eventRecord The event record
     * @param {Scheduler.model.ResourceModel} detail.resourceRecord The resource record
     * @param {object} detail.renderData A data object containing properties that will be used to create the event element
     * @param {object} detail.renderData.style The style property is an object containing style properties for the event element
     * @param {object} detail.renderData.cls The cls property is an object whose property names will be added to the event element if the property value is truthy
     * @param {object} detail.renderData.iconStyle The iconStyle property is an object containing style properties for the icon element if an icon element is to be used
     * @param {object} detail.renderData.iconCls The iconCls property is an object whose property names will be added to the icon element. Initially set from the event record's [iconCls](https://bryntum.com/products/calendar/docs/api/Scheduler/model/EventModel#field-iconCls). Can be mutated by the renderer. If null, or no properties are set, no icon will be rendered
     * @param {string} detail.renderData.eventColor Color to be applied to the event
     * @param {object} detail.renderData.dataset An object which produces the `dataset` of the resulting event bar
     * @param {boolean} detail.renderData.solidBar This is valid for views which create event bars. This is set to `true` by default for all day and interday events so that these appear as a solid block of background color. An eventRenderer may mutate this flag to change in what manner the event bar is colored - as a solid bar of color, or using the foreground color (text and icons) such as the MonthView, the CalendarRow (all day events in a DayView), and OverflowPopups
     * @param {string} detail.renderData.bodyColor When used in a [DayView](https://bryntum.com/products/calendar/docs/api/Calendar/widget/DayView), this color is applied to the body of the event element. Note that this must be light enough that the text color (From the SASS variable `$dayview-event-color`) is visible
     * @param {boolean} detail.showBullet If there is no `iconCls`, and the event is not recurring, then by default a "bullet" circular icon is shown if the view's [showBullet](https://bryntum.com/products/calendar/docs/api/Calendar/widget/mixin/CalendarMixin#config-showBullet) if set. Setting this property in an event renderer overrides this behaviour.
     * @returns {DomConfig,DomConfig[],string,void}
     */
    eventHeaderRenderer? : ((detail: { view: CalendarView, eventRecord: EventModel, resourceRecord: ResourceModel, renderData: { style: object, cls: object, iconStyle: object, iconCls: object, eventColor: string, dataset: object, solidBar: boolean, bodyColor: string }, showBullet: boolean }) => DomConfig|DomConfig[]|string|void)|string
    /**
     * The height of event bars if this view creates event bars.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-eventHeight)
     */
    eventHeight? : number|string
    /**
     * A function, or the name of a function in the ownership hierarchy which you
     * can specify to customize event DOM content.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-eventRenderer)
     * @param {object} detail An object that contains data about the event being rendered
     * @param {CalendarView} detail.view The view rendering the event
     * @param {Scheduler.model.EventModel} detail.eventRecord The event record
     * @param {Scheduler.model.ResourceModel} detail.resourceRecord The Resource record
     * @param {object} detail.renderData A data object containing properties that will be used to create the event element
     * @param {object} detail.renderData.style The style property is an object containing style properties for the event element
     * @param {object} detail.renderData.cls The cls property is an object whose property names will be added to the event element if the property value is truthy
     * @param {object} detail.renderData.iconStyle The iconStyle property is an object containing style properties for the icon element if an icon element is to be used
     * @param {object} detail.renderData.iconCls The iconCls property is an object whose property names will be added to the icon element. Initially set from the event record's [iconCls](https://bryntum.com/products/calendar/docs/api/Scheduler/model/EventModel#field-iconCls). Can be mutated by the renderer. If null, or no properties are set, no icon will be rendered
     * @param {string} detail.renderData.eventColor Color to be applied to the event. This may be a CSS color name or a CSS color value in any of the supported CSS color formats such as `#RRGGBB`, `rgb(255, 0, 0)`, or `rgba(255, 0, 0, 0.5)`.
     * @param {string} detail.renderData.eventBackground A CSS background style to be applied to the event. This is not set by default, but can be set by the renderer to provide a background image or gradient for the event bar. This overrides the `eventColor` property if present.
     * @param {string} detail.renderData.textColor A CSS color to be applied to the event text. This is not set by default, but can be set by the renderer to provide a custom color for the event name text in the event bar. This may be a CSS color name or a CSS color value in any of the supported CSS color formats such as `#RRGGBB`, `rgb(255, 0, 0)`, or `rgba(255, 0, 0, 0.5)`.
     * @param {object} detail.renderData.eventInnerStyle The eventInnerStyle property is an object containing style properties for the inner part of the event element, the `.b-cal-event` element.
     * @param {object} detail.renderData.dataset An object which produces the `dataset` of the resulting event bar
     * @param {boolean} detail.renderData.solidBar This is valid for views which create event bars. This is set to `true` by default for all day and interday events so that these appear as a solid block of background color. An eventRenderer may mutate this flag to change in what manner the event bar is colored - as a solid bar of color, or using the foreground color (text and icons) such as the MonthView, the CalendarRow (all day events in a DayView), and OverflowPopups
     * @param {string} detail.renderData.bodyColor When used in a [DayView](https://bryntum.com/products/calendar/docs/api/Calendar/widget/DayView), this color is applied to the body of the event element. Note that this must be light enough that the text color (From the SASS variable `$dayview-event-color`) is visible
     * @param {boolean} detail.renderData.showBullet If there is no `iconCls`, and the event is not recurring, then by default a "bullet" circular icon is shown if the view's [showBullet](https://bryntum.com/products/calendar/docs/api/Calendar/widget/mixin/CalendarMixin#config-showBullet) if set. Setting this property in an event renderer overrides this behaviour.
     * @returns {DomConfig,DomConfig[],string,void} The content to be used as the event body.
     */
    eventRenderer? : ((detail: { view: CalendarView, eventRecord: EventModel, resourceRecord: ResourceModel, renderData: { style: object, cls: object, iconStyle: object, iconCls: object, eventColor: string, eventBackground: string, textColor: string, eventInnerStyle: object, dataset: object, solidBar: boolean, bodyColor: string, showBullet: boolean } }) => DomConfig|DomConfig[]|string|void)|string
    /**
     * A function which compares events which some views use to decide upon rendering order.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-eventSorter)
     * @param {Scheduler.model.EventModel,EventBar} lhs The left side value to conpare
     * @param {Scheduler.model.EventModel,EventBar} rhs The right side value to conpare
     * @returns {number}
     */
    eventSorter? : (lhs: EventModel|EventBar, rhs: EventModel|EventBar) => number
    /**
     * How much vertical space in pixels to leave between event bars in a cell.
     */
    eventSpacing? : number
    /**
     * By default, the end date of an all day event is displayed in the UI as
     * the last calendar date on which the event falls. For most end users, this is the
     * expected value.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-extendAllDayEndDay)
     */
    extendAllDayEndDay? : boolean
    extraData? : any
    /**
     * If this is set to `true`, then when determining which assigned resource of a multi assigned event
     * to use to create the event UI, the first resource which is still selected in the
     * [resourceFilter](https://bryntum.com/products/calendar/docs/api/Calendar/widget/Sidebar#property-resourceFilter) is used.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-filterEventResources)
     */
    filterEventResources? : boolean
    /**
     * When this widget is a child of a [Container](https://bryntum.com/products/calendar/docs/api/Core/widget/Container), it will by default be participating in a
     * flexbox layout. This config allows you to set this widget's
     * [flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) style.
     * This may be configured as a single number or a `&lt;flex-grow&gt; &lt;flex-shrink&gt; &lt;flex-basis&gt;` format string.
     * numeric-only values are interpreted as the `flex-grow` value.
     */
    flex? : number|string
    /**
     * Set to `true` to move the widget out of the document flow and position it
     * absolutely in browser viewport space.
     */
    floating? : boolean
    /**
     * Config object of a footer. May contain a `dock`, `html` and a `cls` property. A footer is not a widget,
     * but rather plain HTML that follows the last element of the panel's body and [strips](https://bryntum.com/products/calendar/docs/api/Core/widget/Panel#config-strips).
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-footer)
     */
    footer? : {
        dock?: 'top'|'right'|'bottom'|'left'|'start'|'end'
        html?: string
        cls?: string
    }|string
    /**
     * A Function (or name of a function in the ownership hierarchy) which returns the
     * [resource record](https://bryntum.com/products/calendar/docs/api/Scheduler/model/ResourceModel) to use to create the UI for an event.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-getPrimaryResource)
     * @param {Scheduler.model.EventModel} eventRecord The event from which to extract the primary resource.
     * @returns {Scheduler.model.ResourceModel} The resource to be used to render the event.
     */
    getPrimaryResource? : ((eventRecord: EventModel) => ResourceModel)|string
    /**
     * The format used to create the month name in the `aria-label` of the group header of month event blocks.
     */
    groupHeaderAriaMonthFormat? : 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.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-groupHeaderRenderer)
     * @param {object} detail An object containing the details for rendering the group header.
     * @param {Calendar.widget.MonthGrid} detail.view The MonthGrid instance.
     * @param {Core.data.Model} detail.eventRecord The event group record.
     * @param {object} detail.renderData A data object containing properties that will be used to create the event element
     * @param {object} detail.renderData.style The style property is an object containing style properties for the event element
     * @param {object} detail.renderData.cls The cls property is an object whose property names will be added to the event element if the property value is truthy
     * @param {object} detail.renderData.iconStyle The iconStyle property is an object containing style properties for the icon element if an icon element is to be used
     * @param {object} detail.renderData.iconCls The iconCls property is an object whose property names will be added to the icon element. Initially set from the event record's [iconCls](https://bryntum.com/products/calendar/docs/api/Scheduler/model/EventModel#field-iconCls). Can be mutated by the renderer. If null, or no properties are set, no icon will be rendered
     * @param {string} detail.renderData.eventColor Color to be applied to the event
     * @param {object} detail.renderData.dataset An object which produces the `dataset` of the resulting event bar
     * @returns {DomConfig,DomConfig[],string,void} The content to be used for the group header body.
     */
    groupHeaderRenderer? : ((detail: { view: MonthGrid, eventRecord: Model, renderData: { style: object, cls: object, iconStyle: object, iconCls: object, eventColor: string, dataset: object } }) => DomConfig|DomConfig[]|string|void)|string
    /**
     * A config [object](https://bryntum.com/products/calendar/docs/api/Core/widget/Panel#typedef-PanelHeader) for the panel's header or a string in place of a `title`.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-header)
     */
    header? : string|boolean|PanelHeader
    /**
     * The format used to display the month name in the month header of month event blocks.
     */
    headerMonthFormat? : string
    /**
     * Widget's height, used to set element `style.height`. Either specify a valid height string or a number,
     * which will get 'px' appended. We recommend using CSS as the primary way to control height, but in some
     * cases this config is convenient.
     */
    height? : string|number
    /**
     * Configure with true to make widget initially hidden.
     */
    hidden? : boolean
    /**
     * *Only valid if this Widget is [floating](https://bryntum.com/products/calendar/docs/api/Core/widget/Widget#config-floating).*
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-hideAnimation)
     */
    hideAnimation? : boolean|object
    /**
     * If `true`, and the platform shows scrollbars, the vertical scrollbar indicating overflowing
     * events in a month block is hidden.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-hideEventScroll)
     */
    hideEventScroll? : boolean
    /**
     * Specify `true` to make this container hide when it has no visible children (Either empty
     * or all children hidden).
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-hideWhenEmpty)
     */
    hideWhenEmpty? : boolean
    /**
     * An icon to show before the [title](https://bryntum.com/products/calendar/docs/api/Core/widget/Panel#config-title). Either pass a CSS class as a string, or pass a
     * [DomConfig](https://bryntum.com/products/calendar/docs/api/Core/helper/DomHelper#typedef-DomConfig) object describing an element to represent the icon.
     */
    icon? : string|DomConfig
    /**
     * Widget id, if not specified one will be generated. Also used for lookups through Widget.getById
     */
    id? : string
    /**
     * Determines if the widgets read-only state should be controlled by its parent.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-ignoreParentReadOnly)
     */
    ignoreParentReadOnly? : boolean
    /**
     * Convenience setting to align input fields of child widgets. By default, the Field input element is
     * placed immediately following the `label`. If you prefer to have all input fields aligned to the
     * right, set this config to `'end'`.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-inputFieldAlign)
     */
    inputFieldAlign? : 'start'|'end'
    /**
     * Element (or element id) to insert this widget before. If provided, [appendTo](https://bryntum.com/products/calendar/docs/api/Core/widget/Widget#config-appendTo) config is ignored.
     */
    insertBefore? : HTMLElement|string
    /**
     * Element (or element id) to append this widget element to, as a first child. If provided, [appendTo](https://bryntum.com/products/calendar/docs/api/Core/widget/Widget#config-appendTo) config is ignored.
     */
    insertFirst? : HTMLElement|string
    /**
     * An optional CSS class to add to child items of this container.
     */
    itemCls? : string
    /**
     * An object containing typed child widget config objects or Widgets. May also be specified
     * as an array.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-items)
     */
    items? : Record<string, ContainerItemConfig|MenuItemEntry>|(ContainerItemConfig|MenuItemEntry|Widget)[]
    /**
     * An object whose keys are the [key](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) name
     * and optional modifier prefixes: `'Ctrl+'`, `'Alt+'`, `'Meta+'`, and `'Shift+'` (case-insensitive). The values
     * are the name of the instance method to call when the keystroke is received.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-keyMap)
     */
    keyMap? : Record<string, KeyMapConfig>
    /**
     * Convenience setting to use same label placement on all child widgets.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-labelPosition)
     */
    labelPosition? : 'before'|'above'|'align-before'|'auto'|null
    /**
     * The short name of a helper class which manages rendering and styling of child items.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-layout)
     */
    layout? : string|ContainerLayoutConfig
    /**
     * The CSS style properties to apply to the [contentElement](https://bryntum.com/products/calendar/docs/api/Core/widget/Widget#property-contentElement).
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-layoutStyle)
     */
    layoutStyle? : object
    /**
     * An array of [child item](https://bryntum.com/products/calendar/docs/api/Core/widget/Container#config-items) *config objects* which is to be converted into
     * instances only when this Container is rendered, rather than eagerly at construct time.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-lazyItems)
     */
    lazyItems? : Record<string, ContainerItemConfig>|ContainerItemConfig[]|Widget[]
    /**
     * The listener set for this object.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-listeners)
     */
    listeners? : MonthGridListeners
    /**
     * A class translations of which are used for translating this entity.
     * This is often used when translations of an item are defined on its container class.
     * For example:
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-localeClass)
     */
    localeClass? : typeof Base
    /**
     * Set to `false` to disable localization of this object.
     */
    localizable? : boolean
    /**
     * List of properties which values should be translated automatically upon a locale applying.
     * In case there is a need to localize not typical value (not a String value or a field with re-defined setter/getter),
     * you could use 'localeKey' meta configuration.
     * Example:
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-localizableProperties)
     */
    localizableProperties? : string[]
    /**
     * Widget's margin. This may be configured as a single number or a `TRBL` format string.
     * numeric-only values are interpreted as pixels.
     */
    margin? : number|string
    /**
     * This config object contains the defaults for the [Mask](https://bryntum.com/products/calendar/docs/api/Core/widget/Mask) created for the
     * [masked](https://bryntum.com/products/calendar/docs/api/Core/widget/Widget#config-masked) config. Any properties specified in the `masked` config will override these
     * values.
     */
    maskDefaults? : MaskConfig
    /**
     * Set to `true` to apply the default mask to the widget. Alternatively, this can be the mask message or a
     * [Mask](https://bryntum.com/products/calendar/docs/api/Core/widget/Mask) config object.
     */
    masked? : boolean|string|MaskConfig
    /**
     * The maximum date to which the `endDate` of this view may be navigated.
     */
    maxDate? : Date|string
    /**
     * The element's maxHeight. Can be either a String or a Number (which will have 'px' appended). Note that
     * like [height](https://bryntum.com/products/calendar/docs/api/Core/widget/Widget#config-height), *reading* the value will return the numeric value in pixels.
     */
    maxHeight? : string|number
    /**
     * *Only valid if this Widget is [floating](https://bryntum.com/products/calendar/docs/api/Core/widget/Widget#config-floating).*
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-maximizeOnMobile)
     */
    maximizeOnMobile? : number|string
    /**
     * The elements maxWidth. Can be either a String or a Number (which will have 'px' appended). Note that
     * like [width](https://bryntum.com/products/calendar/docs/api/Core/widget/Widget#config-width), *reading* the value will return the numeric value in pixels.
     */
    maxWidth? : string|number
    /**
     * The minimum date to which the `startDate` of this view may be navigated.
     */
    minDate? : Date|string
    /**
     * The element's minHeight. Can be either a String or a Number (which will have 'px' appended). Note that
     * like [height](https://bryntum.com/products/calendar/docs/api/Core/widget/Widget#config-height), *reading* the value will return the numeric value in pixels.
     */
    minHeight? : string|number
    /**
     * The minimum height of each month block.
     * If the month blocks overflow the height of the view's available space, the view will scroll.
     */
    minMonthHeight? : number|string
    /**
     * The elements minWidth. Can be either a String or a Number (which will have 'px' appended). Note that
     * like [width](https://bryntum.com/products/calendar/docs/api/Core/widget/Widget#config-width), *reading* the value will return the numeric value in pixels.
     */
    minWidth? : string|number
    /**
     * When this is configured as `true` a [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
     * is used to monitor this element for size changes caused by either style manipulation, or by CSS
     * layout.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-monitorResize)
     */
    monitorResize? : boolean|{
        immediate?: boolean
    }
    /**
     * A Store configuration block which is used to create the twelve stores which hold the events for each month displayed.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-monthEventStore)
     */
    monthEventStore? : StoreConfig
    /**
     * 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.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-monthHeaderRenderer)
     * @param {object} detail An object containing the details for rendering the month header.
     * @param {Calendar.widget.MonthGrid} detail.view The MonthGrid instance.
     * @param {Core.util.Month} detail.month The month object.
     * @param {number} detail.monthEventCount The number of events in the month.
     * @param {Core.data.Store} detail.monthEventStore The month event store.
     * @returns {DomConfig,DomConfig[],string,void} The content to be used for the month header.
     */
    monthHeaderRenderer? : ((detail: { view: MonthGrid, month: Month, monthEventCount: number, monthEventStore: Store }) => DomConfig|DomConfig[]|string|void)|string
    /**
     * An object containing default config objects which may be referenced by name in the [items](https://bryntum.com/products/calendar/docs/api/Core/widget/Container#config-items)
     * config. For example, a specialized [Menu](https://bryntum.com/products/calendar/docs/api/Core/widget/Menu) subclass may have a `namedItems` default
     * value defined like this:
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-namedItems)
     */
    namedItems? : Record<string, ContainerItemConfig>
    /**
     * A function, or name of a function which is passed the [DomConfig](https://bryntum.com/products/calendar/docs/api/Core/helper/DomHelper#typedef-DomConfig) object which
     * will be used to create the "+n more" button which indicates that a day cell has
     * overflowing events.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-overflowButtonRenderer)
     * @param {DomConfig,object} domConfig A [DomConfig](https://bryntum.com/products/calendar/docs/api/Core/helper/DomHelper#typedef-DomConfig) config object which is used to create the overflow button.
     * @param {string} domConfig.tag The tag name of the element to create.
     * @param {object} domConfig.className An object who's truthy property names will be applied as class names.
     * @param {string} domConfig.text The inner content of the element. <strong>Note that this will be HTML encoded for XSS safety</strong>
     * @param {object} domConfig.style A CSS style definition object.
     * @param {object} domConfig.dataset The DOM data properties to set.
     * @param {number} overflowCount The number of overflowing events.
     * @returns {DomConfig,string,void}
     */
    overflowButtonRenderer? : (domConfig: { tag: string, className: object, text: string, style: object, dataset: object }, overflowCount: number) => DomConfig|string|void
    /**
     * A config object used to create the [OverflowPopup](https://bryntum.com/products/calendar/docs/api/Calendar/widget/OverflowPopup) that this view
     * may show when events for one day overflow the available space.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-overflowPopup)
     */
    overflowPopup? : OverflowPopupConfig
    /**
     * The pointer gesture which shows the popup containing any overflowing events
     * in the current view.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-overflowPopupTrigger)
     */
    overflowPopupTrigger? : 'click'|'mouseover'|'hover'
    /**
     * The owning Widget of this Widget. If this Widget is directly contained (that is, it is one of the
     * [items](https://bryntum.com/products/calendar/docs/api/Core/widget/Container#property-items) of a Container), this config will be ignored. In this case
     * the owner is <strong>always</strong> the encapsulating Container.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-owner)
     */
    owner? : Widget|any
    /**
     * The class name to add to events which have an end date in the past. Defaults to `'b-past-event'`.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-pastEventCls)
     */
    pastEventCls? : string
    /**
     * Set to `true` when a widget is rendered into another widget's [contentElement](https://bryntum.com/products/calendar/docs/api/Core/widget/Widget#property-contentElement), but must
     * not participate in the standard layout of that widget, and must be positioned relatively to that
     * widget's [contentElement](https://bryntum.com/products/calendar/docs/api/Core/widget/Widget#property-contentElement).
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-positioned)
     */
    positioned? : boolean
    /**
     * Prevent tooltip from being displayed on touch devices. Useful for example for buttons that display a
     * menu on click etc, since the tooltip would be displayed at the same time.
     */
    preventTooltipOnTouch? : boolean
    /**
     * Whether this widget is read-only.  This is only valid if the widget is an input
     * field, <strong>or contains input fields at any depth</strong>.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-readOnly)
     */
    readOnly? : boolean
    relayStoreEvents? : boolean
    /**
     * Either a default `rendition` to apply to all child widgets, or a map of renditions keyed by child widget
     * `type`.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-rendition)
     */
    rendition? : string|Record<string, string>|null
    /**
     * Path to load resource images from. Used by the [showResourceAvatars](https://bryntum.com/products/calendar/docs/api/Calendar/widget/mixin/CalendarMixin#config-showResourceAvatars) config
     * to create URLs using the resource's
     * [image](https://bryntum.com/products/calendar/docs/api/Scheduler/model/ResourceModel#field-image) or
     * [imageUrl](https://bryntum.com/products/calendar/docs/api/Scheduler/model/ResourceModel#field-imageUrl) fields:
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-resourceImagePath)
     */
    resourceImagePath? : string
    /**
     * Specifies the various responsive state objects keyed by their name. Each key (except `'*'`, see below) in
     * this object is a state name (see [responsiveState](https://bryntum.com/products/calendar/docs/api/Core/widget/mixin/Responsive#config-responsiveState)) and its corresponding value is the
     * associated [ResponsiveState](https://bryntum.com/products/calendar/docs/api/Core/widget/mixin/Responsive#typedef-ResponsiveState) object.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-responsive)
     */
    responsive? : object
    /**
     * Set to `true` to mark this instance as the default [responsiveTarget](https://bryntum.com/products/calendar/docs/api/Core/widget/mixin/Responsive#config-responsiveTarget) for descendants that do
     * not specify an explicit [responsiveTarget](https://bryntum.com/products/calendar/docs/api/Core/widget/mixin/Responsive#config-responsiveTarget) of their own.
     */
    responsiveRoot? : boolean
    /**
     * The name of the active state of the [responsive](https://bryntum.com/products/calendar/docs/api/Core/widget/mixin/Responsive#config-responsive) config. This is assigned internally
     * and should not be assigned directly.
     */
    responsiveState? : string
    /**
     * The widget whose size and other properties drive this object's responsive behavior. If this config is not
     * specified, the closest ancestor that specified [responsiveRoot=true](https://bryntum.com/products/calendar/docs/api/Core/widget/mixin/Responsive#config-responsiveRoot) will be
     * used. If there is no such ancestor, then the instance using this mixin is used.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-responsiveTarget)
     */
    responsiveTarget? : string|Widget
    /**
     * Configure as `true` to have the component display a translucent ripple when its
     * [focusElement](https://bryntum.com/products/calendar/docs/api/Core/widget/Widget#property-focusElement), or [element](#Core/widget/Widget#property-element) is tapped <em>if the
     * current theme supports ripples</em>. Out of the box, only the Material theme supports ripples.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-ripple)
     */
    ripple? : boolean|{
        delegate?: string
        color?: string
        radius?: number
        clip?: string
    }
    /**
     * If you are rendering this widget to a shadow root inside a web component, set this config to the shadowRoot. If not inside a web component, set it to `document.body`
     */
    rootElement? : ShadowRoot|HTMLElement
    /**
     * This may be configured as `true` to make the widget's element use the `direction:rtl` style.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-rtl)
     */
    rtl? : boolean
    /**
     * Defines what to do if document is scrolled while Widget is visible (only relevant when floating is set to `true`).
     * Valid values: ´null´: do nothing, ´hide´: hide the widget or ´realign´: realign to the target if possible.
     */
    scrollAction? : 'hide'|'realign'|null
    /**
     * A button configuration object to use for the automatically created mode selector button for this mode.
     */
    selectorButton? : ButtonConfig
    /**
     * A menu item configuration object to use for the automatically created mode selector menu item for this mode.
     */
    selectorMenuItem? : MenuItemConfig
    /**
     * A [DateHelper](https://bryntum.com/products/calendar/docs/api/Core/helper/DateHelper) format string/function to use to create date output for
     * abbreviated view descriptions.
     * @param {Date} date The date to format.
     * @returns {string} The formatted date.
     */
    shortDateFormat? : string|((date: Date) => string)
    /**
     * A [DateHelper](https://bryntum.com/products/calendar/docs/api/Core/helper/DateHelper) format string/function to use to create date and time output for
     * abbreviated view descriptions.
     * @param {Date} date The date to format.
     * @returns {string} The formatted date.
     */
    shortDateTimeFormat? : string|((date: Date) => string)
    /**
     * The class name to add to events which have duration less than or equal to
     * [shortEventDuration](https://bryntum.com/products/calendar/docs/api/Calendar/widget/mixin/CalendarMixin#config-shortEventDuration).
     */
    shortEventCls? : string
    /**
     * The duration at which below and equal to this value, an event's encapsulating element gets
     * the [shortEventCls](https://bryntum.com/products/calendar/docs/api/Calendar/widget/mixin/CalendarMixin#config-shortEventCls) added to it so that small event bars can have style rearrangements.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-shortEventDuration)
     */
    shortEventDuration? : string|number
    /**
     * *Only valid if this Widget is [floating](https://bryntum.com/products/calendar/docs/api/Core/widget/Widget#config-floating).*
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-showAnimation)
     */
    showAnimation? : boolean|object
    /**
     * <strong>Not applicable in a `DayView`</strong>
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-showBullet)
     * @param {boolean} bar This is `false` by default. Set this to `true` in modes where a solid event bar should show a bullet icon
     * @param {boolean} noBar This is `true` by default. Events with no background colour, use this to show the event's defined `eventColor`
     */
    showBullet? : boolean|{bar?: boolean, noBar?: boolean}
    /**
     * Configure as `true` to show avatars of the assigned resources (calendars) at the
     * start of the event bar.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-showResourceAvatars)
     */
    showResourceAvatars? : boolean|string
    /**
     * Set to `false` to not show the tooltip when this widget is [disabled](https://bryntum.com/products/calendar/docs/api/Core/widget/Widget#property-disabled)
     */
    showTooltipWhenDisabled? : boolean
    /**
     * Programmatic control over how many columns to span when used in a grid layout.
     */
    span? : number
    /**
     * Set to `true` to stack multi-day events within each cell in the order of their start time.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-stackMultiDayEvents)
     */
    stackMultiDayEvents? : boolean
    /**
     * This value can be one of the following:
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-stateful)
     */
    stateful? : boolean|object|string[]
    /**
     * The events that, when fired by this component, should trigger it to save its state by calling
     * [saveState](https://bryntum.com/products/calendar/docs/api/Core/mixin/State#function-saveState).
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-statefulEvents)
     */
    statefulEvents? : object|string[]
    /**
     * The key to use when saving this object's state in the [stateProvider](https://bryntum.com/products/calendar/docs/api/Core/mixin/State#config-stateProvider). If this config is
     * not assigned, and [stateful](https://bryntum.com/products/calendar/docs/api/Core/mixin/State#config-stateful) is not set to `false`, the [id](#Core/widget/Widget#config-id)
     * (if explicitly specified) will be used as the `stateId`.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-stateId)
     */
    stateId? : string
    /**
     * The `StateProvider` to use to save and restore this object's [state](https://bryntum.com/products/calendar/docs/api/Core/mixin/State#property-state). By default, `state`
     * will be saved using the [default state provider](https://bryntum.com/products/calendar/docs/api/Core/state/StateProvider#property-instance-static).
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-stateProvider)
     */
    stateProvider? : StateProvider
    /**
     * Specify `true` to match fields by their `name` property only when assigning a [record](https://bryntum.com/products/calendar/docs/api/Core/widget/Container#config-record),
     * without falling back to `ref`.
     */
    strictRecordMapping? : boolean
    /**
     * An object containing widgets keyed by name. By default (when no `type` is given), strips are
     * [toolbars](https://bryntum.com/products/calendar/docs/api/Core/widget/Toolbar). If you want to pass an array, you can use
     * the toolbar's [items](https://bryntum.com/products/calendar/docs/api/Core/widget/Container#config-items).
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-strips)
     */
    strips? : Record<string, ContainerItemConfig>
    /**
     * The converse of [syncViewDate](https://bryntum.com/products/calendar/docs/api/Calendar/widget/mixin/CalendarMixin#property-syncViewDate)
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-syncCalendarDate)
     */
    syncCalendarDate? : boolean
    /**
     * The converse of [syncCalendarDate](https://bryntum.com/products/calendar/docs/api/Calendar/widget/mixin/CalendarMixin#property-syncCalendarDate)
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-syncViewDate)
     */
    syncViewDate? : boolean
    /**
     * A configuration for the [tab](https://bryntum.com/products/calendar/docs/api/Core/widget/Tab) created for this widget when it is placed in a
     * [TabPanel](https://bryntum.com/products/calendar/docs/api/Core/widget/TabPanel). For example, this config can be used to control the icon of the `tab` for
     * this widget:
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-tab)
     */
    tab? : boolean|TabConfig
    /**
     * When this container is used as a tab in a TabPanel, these items are added to the
     * [TabBar](https://bryntum.com/products/calendar/docs/api/Core/widget/TabBar) when this container is the active tab.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-tabBarItems)
     */
    tabBarItems? : ToolbarItems[]|Widget[]
    /**
     * The tag name of this Widget's root element
     */
    tag? : string
    /**
     * A Config object representing the configuration of a [Toolbar](https://bryntum.com/products/calendar/docs/api/Core/widget/Toolbar),
     * or array of config objects representing the child items of a Toolbar.
     * This creates a toolbar docked to the top of the panel immediately below the header.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-tbar)
     */
    tbar? : (ContainerItemConfig|string)[]|ToolbarConfig|PagingToolbarConfig|null
    /**
     * Text alignment: 'left', 'center' or 'right'. Also accepts direction neutral 'start' and 'end'.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-textAlign)
     */
    textAlign? : 'left'|'center'|'right'|'start'|'end'
    /**
     * The format used to display the date and time of events in [EventTooltip](https://bryntum.com/products/calendar/docs/api/Calendar/feature/EventTooltip) tooltips.
     */
    timeFormat? : string
    /**
     * A title to display in the header or owning TabPanel. Causes creation and docking of a header
     * to the top if no header is configured.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-title)
     */
    title? : string
    /**
     * The [tools](https://bryntum.com/products/calendar/docs/api/Core/widget/Tool) to add either before or after the `title` in the Panel header. Each
     * property name is the reference by which an instantiated tool may be retrieved from the live
     * `[tools](https://bryntum.com/products/calendar/docs/api/Core/widget/mixin/Toolable#property-tools)` property.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-tools)
     */
    tools? : Record<string, ToolConfig>|null
    /**
     * Tooltip for the widget, either as a string or as a Tooltip config object.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-tooltip)
     */
    tooltip? : string|TooltipConfig|null
    /**
     * By default, tabbing within a Panel is not contained, ie you can TAB out of the Panel
     * forwards or backwards.
     * Configure this as `true` to disallow tabbing out of the Panel, and make tabbing circular within this Panel.
     */
    trapFocus? : boolean
    type? : 'monthgrid'|'yearmonthgrid'
    /**
     * Custom CSS class name suffixes to apply to the elements rendered by this widget. This may be specified
     * as a space separated string, an array of strings, or as an object in which property names with truthy
     * values are used as the class names.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-ui)
     */
    ui? : 'plain'|'toolbar'|string|object
    /**
     * The space to leave between each month group. Defaults to no gap.
     */
    viewGap? : string|number
    /**
     * The week start day, 0 meaning Sunday, 6 meaning Saturday.
     * Defaults to [weekStartDay](https://bryntum.com/products/calendar/docs/api/Core/helper/DateHelper#property-weekStartDay-static).
     */
    weekStartDay? : number
    /**
     * A widgets weight determines its position among siblings when added to a [Container](https://bryntum.com/products/calendar/docs/api/Core/widget/Container).
     * Higher weights go further down.
     */
    weight? : number
    /**
     * Widget's width, used to set element `style.width`. Either specify a valid width string or a number, which
     * will get 'px' appended. We recommend using CSS as the primary way to control width, but in some cases
     * this config is convenient.
     */
    width? : string|number
    /**
     * The x position for the widget.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-x)
     */
    x? : number
    /**
     * The y position for the widget.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-y)
     */
    y? : number
    /**
     * The year to display
     */
    year? : number

    // Events
    /**
     * This event fires whenever the [autoCreate gesture](https://bryntum.com/products/calendar/docs/api/Calendar/widget/mixin/CalendarMixin#config-autoCreate) is detected
     * and also when a [drag-create](https://bryntum.com/products/calendar/docs/api/Calendar/feature/CalendarDrag) gesture is detected.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#event-beforeAutoCreate)
     * @param {object} event Event object
     * @param {Event} event.domEvent The DOM event which initiated the creation.
     * @param {Date} event.date *DEPRECATED in favour of `startDate`.* The starting time of the event to be created. If this is in a `DayView`, this will be snapped according to the specification in [autoCreate](https://bryntum.com/products/calendar/docs/api/Calendar/widget/mixin/CalendarMixin#config-autoCreate)
     * @param {Date} event.startDate The starting time of the event to be created. If this is in a `DayView`, this will be snapped according to the specification in [autoCreate](https://bryntum.com/products/calendar/docs/api/Calendar/widget/mixin/CalendarMixin#config-autoCreate)
     * @param {Date} event.endDate The ending time of the event to be created.
     * @param {Scheduler.model.ResourceModel} event.resourceRecord The resource if the UI includes a resource.
     * @param {CalendarView} event.view This view.
     */
    onBeforeAutoCreate? : ((event: { domEvent: Event, date: Date, startDate: Date, endDate: Date, resourceRecord: ResourceModel, view: CalendarView }) => Promise<boolean>|boolean|void)|string
    /**
     * Triggered before a view's orientating date changes.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#event-beforeChangeDate)
     * @param {object} event Event object
     * @param {Date} event.oldDate The current orientating date of this view.
     * @param {Date} event.date The new date to which this view is to be orientated.
     */
    onBeforeChangeDate? : ((event: { oldDate: Date, date: Date }) => Promise<boolean>|boolean|void)|string
    /**
     * Fires before an object is destroyed.
     * @param {object} event Event object
     * @param {Core.Base} event.source The Object that is being destroyed.
     */
    onBeforeDestroy? : ((event: { source: Base }) => void)|string
    /**
     * Triggered before a widget is hidden. Return `false` to prevent the action.
     * @param {object} event Event object
     * @param {Core.widget.Widget} event.source The widget being hidden.
     */
    onBeforeHide? : ((event: { source: Widget }) => Promise<boolean>|boolean|void)|string
    /**
     * Triggered before a new [responsiveState](https://bryntum.com/products/calendar/docs/api/Core/widget/mixin/Responsive#config-responsiveState) is applied.
     * @param {object} event Event object
     * @param {Core.widget.Widget} event.source The widget whose `responsiveState` is to be changed
     * @param {string} event.state The new value for the widget's `responsiveState`
     * @param {string} event.oldState The previous value for the widget's `responsiveState`
     */
    onBeforeResponsiveStateChange? : ((event: { source: Widget, state: string, oldState: string }) => void)|string
    /**
     * Fired before this container will load record values into its child fields. This is useful if you
     * want to modify the UI before data is loaded (e.g. set some input field to be readonly)
     * @param {object} event Event object
     * @param {Core.widget.Container} event.source The container
     * @param {Core.data.Model} event.record The record
     */
    onBeforeSetRecord? : ((event: { source: Container, record: Model }) => void)|string
    /**
     * Triggered before a widget is shown. Return `false` to prevent the action.
     * @param {object} event Event object
     * @param {Core.widget.Widget,any} event.source The widget being shown
     */
    onBeforeShow? : ((event: { source: Widget|any }) => Promise<boolean>|boolean|void)|string
    /**
     * Fired before an [OverflowPopup](https://bryntum.com/products/calendar/docs/api/Calendar/widget/OverflowPopup) is shown when an a
     * "+ n more" overflow button is activated by an [overflowPopupTrigger](https://bryntum.com/products/calendar/docs/api/Calendar/widget/mixin/DayCellRenderer#config-overflowPopupTrigger) event.
     * @param {object} event Event object
     * @param {HTMLElement} event.cell The day cell for which the overflow popup is going to be shown.
     * @param {DayCell} event.cellData A `DayCell` object that contains data about the cell.
     * @param {Date} event.date The date which has overflowing events
     * @param {Calendar.widget.OverflowPopup} event.overflowPopup The overflow `Popup`.
     */
    onBeforeShowOverflowPopup? : ((event: { cell: HTMLElement, cellData: DayCell, date: Date, overflowPopup: OverflowPopup }) => Promise<boolean>|boolean|void)|string
    /**
     * Fired before state is applied to the source. Allows editing the state object or preventing the operation.
     * @param {object} event Event object
     * @param {any} event.state State object config
     */
    onBeforeStateApply? : ((event: { state: any }) => Promise<boolean>|boolean|void)|string
    /**
     * Fired before state is saved by the StateProvider. Allows editing the state object or preventing the operation.
     * @param {object} event Event object
     * @param {any} event.state State object config
     */
    onBeforeStateSave? : ((event: { state: any }) => Promise<boolean>|boolean|void)|string
    /**
     * Fires when any other event is fired from the object.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#event-catchAll)
     * @param {object} event Event object
     * @param {{[key: string]: any, type: string}} event.event The Object that contains event details
     * @param {string} event.event.type The type of the event which is caught by the listener
     */
    onCatchAll? : ((event: {[key: string]: any, type: string}) => void)|string
    /**
     * Fired when a new set of events has been gathered for this view's date range.
     * @param {object} event Event object
     * @param {Map<any, any>} event.cellMap The map of date keys to [day cell](https://bryntum.com/products/calendar/docs/api/Calendar/widget/mixin/DayCellCollecter#typedef-DayCell) data blocks.
     */
    onCellMapPopulated? : ((event: { cellMap: Map<any, any> }) => void)|string
    /**
     * Fires when a Panel is collapsed using the [collapsible](https://bryntum.com/products/calendar/docs/api/Core/widget/Panel#config-collapsible) setting.
     * @param {object} event Event object
     * @param {Core.widget.Panel} event.source This Panel.
     */
    onCollapse? : ((event: { source: Panel }) => void)|string
    /**
     * Fires when the number of columns in the MonthGrid changes.
     * This happens when the width of the MonthGrid changes.
     * @param {object} event Event object
     * @param {Calendar.widget.MonthGrid} event.source This MonthGrid instance.
     * @param {number} event.columnCount The new number of columns.
     * @param {number} event.oldColumnCount The previous number of columns.
     */
    onColumnCountChange? : ((event: { source: MonthGrid, columnCount: number, oldColumnCount: number }) => void)|string
    /**
     * Fired after one day cell's events are collected in sorted order according to the
     * [eventSorter](https://bryntum.com/products/calendar/docs/api/Calendar/widget/mixin/CalendarMixin#config-eventSorter)
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#event-dayCellPopulated)
     * @param {object} event Event object
     * @param {Scheduler.model.EventModel[]} event.events The events to be shown for the passed date
     * @param {Date} event.The date the events are to be shown in.
     */
    onDayCellPopulated? : ((event: { events: EventModel[], The: Date }) => void)|string
    /**
     * Fires when an object is destroyed.
     * @param {object} event Event object
     * @param {Core.Base} event.source The Object that is being destroyed.
     */
    onDestroy? : ((event: { source: Base }) => void)|string
    /**
     * Fires when a field is mutated and the state of the [hasChanges](https://bryntum.com/products/calendar/docs/api/Core/widget/Container#property-hasChanges) property changes
     * @param {object} event Event object
     * @param {Core.widget.Container} event.source The container.
     * @param {boolean} event.dirty The dirty state of the Container - `true` if there are any fields which have been changed since initial load.
     */
    onDirtyStateChange? : ((event: { source: Container, dirty: boolean }) => void)|string
    /**
     * Triggered when a widget's [element](https://bryntum.com/products/calendar/docs/api/Core/widget/Widget#property-element) is available.
     * @param {object} event Event object
     * @param {HTMLElement} event.element The Widget's element.
     */
    onElementCreated? : ((event: { element: HTMLElement }) => void)|string
    /**
     * Fired when an empty cell content area is clicked on. If the handler returns
     * `false` the current pointer event is not processed further.
     * @param {object} event Event object
     * @param {Event} event.domEvent The triggering DOM event.
     * @param {Date} event.date The date which has no visible events
     */
    onEmptyCellClick? : ((event: { domEvent: Event, date: Date }) => void)|string
    /**
     * Fired when an [autoCreate](https://bryntum.com/products/calendar/docs/api/Calendar/widget/mixin/CalendarMixin#config-autoCreate) gesture has created a new event
     * and added it to the event store.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#event-eventAutoCreated)
     * @param {object} event Event object
     * @param {CalendarView} event.source This Calendar view instance.
     * @param {Scheduler.model.EventModel} event.eventRecord The new event record.
     */
    onEventAutoCreated? : ((event: { source: CalendarView, eventRecord: EventModel }) => void)|string
    /**
     * Fires when a day spanning event is found, and the date to which its encapsulating event bar
     * extends has been calculated.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#event-eventPropagate)
     * @param {object} event Event object
     * @param {Date} event.eventEndDate The end date for which to calculate the propagate end date.
     * @param {Date} event.propagateEndDate The system-calculated end point of the event bar.
     * @param {boolean} event.isAllDay `true` if the event is an all day event, or spans multiple days.
     * @param {boolean} event.isOverflow `true` if this is being called as part of further propagation.
     * @param {boolean} event.overflows `true` if the event extends into future cells.
     * @param {Scheduler.model.EventModel} event.eventRecord The event record being propagated.
     * @param {Date} event.date The date from which the event is being propagated.
     */
    onEventPropagate? : ((event: { eventEndDate: Date, propagateEndDate: Date, isAllDay: boolean, isOverflow: boolean, overflows: boolean, eventRecord: EventModel, date: Date }) => void)|string
    /**
     * Fires when a Panel is expanded using the [collapsible](https://bryntum.com/products/calendar/docs/api/Core/widget/Panel#config-collapsible) setting.
     * @param {object} event Event object
     * @param {Core.widget.Panel} event.source This Panel.
     */
    onExpand? : ((event: { source: Panel }) => void)|string
    /**
     * Fired when focus enters this Widget.
     * @param {object} event Event object
     * @param {Core.widget.Widget} event.source This Widget
     * @param {HTMLElement} event.fromElement The element which lost focus.
     * @param {HTMLElement} event.toElement The element which gained focus.
     * @param {Core.widget.Widget} event.fromWidget The widget which lost focus.
     * @param {Core.widget.Widget} event.toWidget The widget which gained focus.
     * @param {boolean} event.backwards `true` if the `toElement` is before the `fromElement` in document order.
     */
    onFocusIn? : ((event: { source: Widget, fromElement: HTMLElement, toElement: HTMLElement, fromWidget: Widget, toWidget: Widget, backwards: boolean }) => void)|string
    /**
     * Fired when focus exits this Widget's ownership tree. This is different from a `blur` event.
     * focus moving from within this Widget's ownership tree, even if there are floating widgets
     * will not trigger this event. This is when focus exits this widget completely.
     * @param {object} event Event object
     * @param {Core.widget.Widget} event.source This Widget
     * @param {HTMLElement} event.fromElement The element which lost focus.
     * @param {HTMLElement} event.toElement The element which gained focus.
     * @param {Core.widget.Widget} event.fromWidget The widget which lost focus.
     * @param {Core.widget.Widget} event.toWidget The widget which gained focus.
     * @param {boolean} event.backwards `true` if the `toElement` is before the `fromElement` in document order.
     */
    onFocusOut? : ((event: { source: Widget, fromElement: HTMLElement, toElement: HTMLElement, fromWidget: Widget, toWidget: Widget, backwards: boolean }) => void)|string
    /**
     * Fires when a group record is clicked, before its expanded/collapsed state is toggled.
     * @param {object} event Event object
     * @param {Calendar.widget.MonthGrid} event.source This MonthGrid instance.
     * @param {HTMLElement} event.groupBar The group bar element that was clicked.
     * @param {Core.data.Model} event.groupRecord The group record that was clicked.
     * @param {Event} event.domEvent The intigating DOM event.
     */
    onGroupRecordClick? : ((event: { source: MonthGrid, groupBar: HTMLElement, groupRecord: Model, domEvent: Event }) => Promise<boolean>|boolean|void)|string
    /**
     * Fires when a group record is right clicked.
     * @param {object} event Event object
     * @param {Calendar.widget.MonthGrid} event.source This MonthGrid instance.
     * @param {HTMLElement} event.groupBar The group bar element that was clicked.
     * @param {Core.data.Model} event.groupRecord The group record that was clicked.
     * @param {Event} event.domEvent The intigating DOM event.
     */
    onGroupRecordContextMenu? : ((event: { source: MonthGrid, groupBar: HTMLElement, groupRecord: Model, domEvent: Event }) => void)|string
    /**
     * Fires when a group record is double clicked.
     * @param {object} event Event object
     * @param {Calendar.widget.MonthGrid} event.source This MonthGrid instance.
     * @param {HTMLElement} event.groupBar The group bar element that was clicked.
     * @param {Core.data.Model} event.groupRecord The group record that was clicked.
     * @param {Event} event.domEvent The intigating DOM event.
     */
    onGroupRecordDblClick? : ((event: { source: MonthGrid, groupBar: HTMLElement, groupRecord: Model, domEvent: Event }) => void)|string
    /**
     * Fires when a group record is mouseouted.
     * @param {object} event Event object
     * @param {Calendar.widget.MonthGrid} event.source This MonthGrid instance.
     * @param {HTMLElement} event.groupBar The group bar element that was clicked.
     * @param {Core.data.Model} event.groupRecord The group record that was clicked.
     * @param {Event} event.domEvent The intigating DOM event.
     */
    onGroupRecordMouseOut? : ((event: { source: MonthGrid, groupBar: HTMLElement, groupRecord: Model, domEvent: Event }) => void)|string
    /**
     * Fires when a group record is mousovered.
     * @param {object} event Event object
     * @param {Calendar.widget.MonthGrid} event.source This MonthGrid instance.
     * @param {HTMLElement} event.groupBar The group bar element that was clicked.
     * @param {Core.data.Model} event.groupRecord The group record that was clicked.
     * @param {Event} event.domEvent The intigating DOM event.
     */
    onGroupRecordMouseOver? : ((event: { source: MonthGrid, groupBar: HTMLElement, groupRecord: Model, domEvent: Event }) => void)|string
    /**
     * Triggered after a widget was hidden
     * @param {object} event Event object
     * @param {Core.widget.Widget} event.source The widget
     */
    onHide? : ((event: { source: Widget }) => void)|string
    /**
     * Triggered when a widget which had been in a non-visible state for any reason
     * achieves visibility.
     * ...
     * [View online docs...](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#event-paint)
     * @param {object} event Event object
     * @param {Core.widget.Widget} event.source The widget being painted.
     * @param {boolean} event.firstPaint `true` if this is the first paint.
     */
    onPaint? : ((event: { source: Widget, firstPaint: boolean }) => void)|string
    /**
     * Fired when a Widget's read only state is toggled
     * @param {object} event Event object
     * @param {boolean} event.readOnly Read only or not
     */
    onReadOnly? : ((event: { readOnly: boolean }) => void)|string
    /**
     * This event is fired after a widget's elements have been synchronized due to a direct or indirect call
     * to [recompose](https://bryntum.com/products/calendar/docs/api/Core/widget/Widget#function-recompose), if this results in some change to the widget's rendered DOM elements.
     */
    onRecompose? : (() => void)|string
    /**
     * Fires when this MonthGrid refreshes.
     * @param {object} event Event object
     * @param {Calendar.widget.MonthGrid} event.source The triggering instance.
     */
    onRefresh? : ((event: { source: MonthGrid }) => void)|string
    /**
     * Fired when the encapsulating element of a Widget resizes *only when [monitorResize](https://bryntum.com/products/calendar/docs/api/Core/widget/Widget#config-monitorResize) is `true`*.
     * @param {object} event Event object
     * @param {Core.widget.Widget} event.source This Widget
     * @param {number} event.width The new width
     * @param {number} event.height The new height
     * @param {number} event.oldWidth The old width
     * @param {number} event.oldHeight The old height
     */
    onResize? : ((event: { source: Widget, width: number, height: number, oldWidth: number, oldHeight: number }) => void)|string
    /**
     * Fires when an event group header is clicked *if* the [monthEventStore](https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthGrid#config-monthEventStore) is configured
     * to [group events](https://bryntum.com/products/calendar/docs/api/Core/data/mixin/StoreGroup#config-groupers) by resource.
     * @param {object} event Event object
     * @param {Calendar.widget.MonthGrid} event.source This MonthGrid instance.
     * @param {Event} event.domEvent The initiating DOM event.
     * @param {Date} event.date The date of the UI element which contains the event.
     * @param {HTMLElement} event.resourceElement The UI element which encapsulates the resource.
     * @param {Scheduler.model.ResourceModel} event.resourceRecord The resource associated with the target element.
     */
    onResourceClick? : ((event: { source: MonthGrid, domEvent: Event, date: Date, resourceElement: HTMLElement, resourceRecord: ResourceModel }) => void)|string
    /**
     * Triggered when a new [responsiveState](https://bryntum.com/products/calendar/docs/api/Core/widget/mixin/Responsive#config-responsiveState) is applied.
     * @param {object} event Event object
     * @param {Core.widget.Widget} event.source The widget whose `responsiveState` has changed
     * @param {string} event.state The new value for the widget's `responsiveState`
     * @param {string} event.oldState The previous value for the widget's `responsiveState`
     */
    onResponsiveStateChange? : ((event: { source: Widget, state: string, oldState: string }) => void)|string
    /**
     * Triggered after a widget is shown.
     * @param {object} event Event object
     * @param {Core.widget.Widget} event.source The widget
     */
    onShow? : ((event: { source: Widget }) => void)|string
    /**
     * Fired after an [OverflowPopup](https://bryntum.com/products/calendar/docs/api/Calendar/widget/OverflowPopup) has been shown when an a
     * "+ n more" overflow button is activated by an [overflowPopupTrigger](https://bryntum.com/products/calendar/docs/api/Calendar/widget/mixin/DayCellRenderer#config-overflowPopupTrigger) event.
     * @param {object} event Event object
     * @param {HTMLElement} event.cell The day cell for which the overflow popup is going to be shown.
     * @param {DayCell} event.cellData A `DayCell` object that contains data about the cell.
     * @param {Date} event.date The date which has overflowing events
     * @param {Calendar.widget.OverflowPopup} event.overflowPopup The overflow `Popup`.
     */
    onShowOverflowPopup? : ((event: { cell: HTMLElement, cellData: DayCell, date: Date, overflowPopup: OverflowPopup }) => void)|string
    /**
     * A header [tool](https://bryntum.com/products/calendar/docs/api/Core/widget/Panel#config-tools) has been clicked.
     * @param {object} event Event object
     * @param {Core.widget.Tool} event.source This Panel.
     * @param {Core.widget.Tool} event.tool The tool which is being clicked.
     */
    onToolClick? : ((event: { source: Tool, tool: Tool }) => void)|string

}

export class BryntumMonthGrid extends React.Component<BryntumMonthGridProps> {

    static instanceClass = MonthGrid;

    static instanceName = 'MonthGrid';

    processWidgetContent = processWidgetContent;

    static configNames = [
        'activationKey',
        'adopt',
        'align',
        'anchor',
        'ariaDescription',
        'ariaLabel',
        'bbar',
        'bodyCls',
        'bubbleEvents',
        'centered',
        'collapsible',
        'color',
        'config',
        'constrainTo',
        'contentElementCls',
        'dataField',
        'date',
        'dayCellNameFormat',
        'defaultBindProperty',
        'defaultFocus',
        'defaults',
        'descriptionRenderer',
        'detectCSSCompatibilityIssues',
        'dock',
        'draggable',
        'drawer',
        'elementAttributes',
        'emptyCellRenderer',
        'eventFilter',
        'eventHeaderRenderer',
        'eventHeight',
        'eventRenderer',
        'eventSorter',
        'floating',
        'footer',
        'getPrimaryResource',
        'groupHeaderRenderer',
        'header',
        'hideAnimation',
        'hideEventScroll',
        'hideWhenEmpty',
        'icon',
        'ignoreParentReadOnly',
        'itemCls',
        'lazyItems',
        'listeners',
        'localeClass',
        'localizable',
        'localizableProperties',
        'maskDefaults',
        'masked',
        'monitorResize',
        'monthEventStore',
        'monthHeaderRenderer',
        'namedItems',
        'overflowButtonRenderer',
        'overflowPopup',
        'overflowPopupTrigger',
        'owner',
        'positioned',
        'preventTooltipOnTouch',
        'relayStoreEvents',
        'resourceImagePath',
        'responsive',
        'responsiveRoot',
        'responsiveState',
        'responsiveTarget',
        'ripple',
        'rootElement',
        'scrollAction',
        'selectorButton',
        'selectorMenuItem',
        'shortEventCls',
        'shortEventDuration',
        'showAnimation',
        'showBullet',
        'showResourceAvatars',
        'showTooltipWhenDisabled',
        'stateful',
        'statefulEvents',
        'stateId',
        'stateProvider',
        'strips',
        'tab',
        'tabBarItems',
        'tag',
        'tbar',
        'textAlign',
        'trapFocus',
        'type',
        'ui',
        'weekStartDay',
        'weight',
        'year'
    ];

    static propertyConfigNames = [
        'alignSelf',
        'animateTimeShift',
        'appendTo',
        'callOnFunctions',
        'catchEventHandlerExceptions',
        'cls',
        'collapsed',
        'column',
        'dataset',
        'dateFormat',
        'dateSeparator',
        'defaultScrollOptions',
        'descriptionFormat',
        'disabled',
        'eventSpacing',
        'extendAllDayEndDay',
        'extraData',
        'filterEventResources',
        'flex',
        'groupHeaderAriaMonthFormat',
        'headerMonthFormat',
        'height',
        'hidden',
        'id',
        'inputFieldAlign',
        'insertBefore',
        'insertFirst',
        'items',
        'keyMap',
        'labelPosition',
        'layout',
        'layoutStyle',
        'margin',
        'maxDate',
        'maxHeight',
        'maximizeOnMobile',
        'maxWidth',
        'minDate',
        'minHeight',
        'minMonthHeight',
        'minWidth',
        'onBeforeAutoCreate',
        'onBeforeChangeDate',
        'onBeforeDestroy',
        'onBeforeHide',
        'onBeforeResponsiveStateChange',
        'onBeforeSetRecord',
        'onBeforeShow',
        'onBeforeShowOverflowPopup',
        'onBeforeStateApply',
        'onBeforeStateSave',
        'onCatchAll',
        'onCellMapPopulated',
        'onCollapse',
        'onColumnCountChange',
        'onDayCellPopulated',
        'onDestroy',
        'onDirtyStateChange',
        'onElementCreated',
        'onEmptyCellClick',
        'onEventAutoCreated',
        'onEventPropagate',
        'onExpand',
        'onFocusIn',
        'onFocusOut',
        'onGroupRecordClick',
        'onGroupRecordContextMenu',
        'onGroupRecordDblClick',
        'onGroupRecordMouseOut',
        'onGroupRecordMouseOver',
        'onHide',
        'onPaint',
        'onReadOnly',
        'onRecompose',
        'onRefresh',
        'onResize',
        'onResourceClick',
        'onResponsiveStateChange',
        'onShow',
        'onShowOverflowPopup',
        'onToolClick',
        'pastEventCls',
        'readOnly',
        'rendition',
        'rtl',
        'shortDateFormat',
        'shortDateTimeFormat',
        'span',
        'stackMultiDayEvents',
        'strictRecordMapping',
        'syncCalendarDate',
        'syncViewDate',
        'timeFormat',
        'title',
        'tools',
        'tooltip',
        'viewGap',
        'width',
        'x',
        'y'
    ];

    static propertyNames = [
        'allowDragCreate',
        'allowDragMove',
        'allowDragResize',
        'anchorSize',
        'autoCreate',
        'dayCellCls',
        'dragUnit',
        'eventCountTip',
        'eventDots',
        'firstVisibleCell',
        'firstVisibleDate',
        'focusVisible',
        'hasChanges',
        'hideNonWorkingDays',
        'isSettingValues',
        'isValid',
        'lastVisibleCell',
        'lastVisibleDate',
        'nonWorkingDays',
        'parent',
        'record',
        'scrollable',
        'showEvents',
        'state',
        'values'
    ];

    // Component instance
    instance!: MonthGrid;

    // Component element
    element! : HTMLElement;

    componentDidMount(): void {
        this.instance = createWidget(this);
    }

    componentWillUnmount(): void {
        // @ts-ignore
        this.instance?.destroy?.();
    }

    /**
     * Component about to be updated, from changing a prop using state.
     * React to it depending on what changed and prevent react from re-rendering our component.
     * @param nextProps
     * @param nextState
     * @returns {boolean}
     */
    shouldComponentUpdate(nextProps: Readonly<BryntumMonthGridProps>, nextState: Readonly<{}>): boolean {
        return shouldComponentUpdate(this, nextProps, nextState);
    }

    render(): React.ReactNode {

        const className = `b-react-month-grid-container`;
        return (
            <div className={className} ref={(element) => (this.element = element!)}></div>
        );

    }
}
