MonthGrid

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

Calendar month grid

//<code-header>
fiddle.title = 'Calendar month grid';
//</code-header>
const calendar = new Calendar({
    appendTo : targetElement,
    height   : 700,
    date     : '2025-01-22',
    modes    : {
        day       : null,
        week      : null,
        month     : null,
        year      : null,
        agenda    : null,
        monthGrid : {
            // Hide the scroll bar in month blocks if this platform shows scrollbars
            hideEventScroll : Boolean(DomHelper.scrollBarWidth),

            // In each month's store, group events by resource
            monthEventStore : {
                startGroupsCollapsed : true,
                groupers             : [{
                    field : 'resource.name'
                }]
            },
            monthHeaderRenderer({ monthEventCount }) {
                // Get the default pair of element configs, month name end event count
                const result = this.defaultMonthHeaderRenderer(...arguments);
                // Replace the text property of the event count element with HTML containing an icon
                result[1].html = `${monthEventCount} <i class="fa fa-external-link"></i>`;
                delete result[1].text;
                return result;
            }
        }
    },
    resources : [
        {
            id         : 'music',
            name       : 'Music',
            eventColor : 'blue'
        },
        {
            id         : 'motor',
            name       : 'Motor Sport',
            eventColor : 'red'
        },
        {
            id         : 'extreme',
            name       : 'Extreme Sport',
            eventColor : 'orange'
        }
    ],
    events : [
        {
            id         : 'cea3faac-9eec-40a1-aeb3-ba3dff40029e',
            resourceId : 'extreme',
            name       : 'Sky Drop',
            startDate  : '2025-01-01T14:00:00',
            endDate    : '2025-01-01T15:00:00'
        },
        {
            id         : 'f251be24-16d7-4dcb-b6d8-1c9de9ad5320',
            resourceId : 'music',
            name       : 'Jazz Night',
            startDate  : '2025-01-22T17:00:00',
            endDate    : '2025-01-22T21:00:00'
        },
        {
            id         : 'e2e23f4c-e3b2-4035-a7dc-3f7b82091c15',
            resourceId : 'extreme',
            name       : 'Adrenaline Zone',
            startDate  : '2025-01-02T10:00:00',
            endDate    : '2025-01-02T14:00:00'
        },
        {
            id         : 'c77d58bc-8f1d-4eac-918e-fe031266f1a0',
            resourceId : 'motor',
            name       : 'Grand Prix Drift',
            startDate  : '2025-01-21T11:00:00',
            endDate    : '2025-01-21T15:00:00'
        },
        {
            id         : '9a73a535-e7bc-4aa0-b1d8-95145ece5f6f',
            resourceId : 'music',
            name       : 'Jazz Night',
            startDate  : '2025-01-03T15:00:00',
            endDate    : '2025-01-03T19:00:00'
        },
        {
            id         : 'b23576b3-8d11-4c3d-89f3-657761aac84f',
            resourceId : 'motor',
            name       : 'Speed Summit',
            startDate  : '2025-01-24T14:00:00',
            endDate    : '2025-01-24T17:00:00'
        },
        {
            id         : 'e1175338-21b3-43d3-abe0-aa777df6458b',
            resourceId : 'motor',
            name       : 'Turbo Trials',
            startDate  : '2025-01-27T17:00:00',
            endDate    : '2025-01-27T21:00:00'
        },
        {
            id         : 'a82387ad-3696-4b88-ae33-6dac85e5b58d',
            resourceId : 'extreme',
            name       : 'Adrenaline Zone',
            startDate  : '2025-01-25T15:00:00',
            endDate    : '2025-01-25T18:00:00'
        },
        {
            id         : '94ba3be3-d591-43cb-82d1-ac3b30ce984b',
            resourceId : 'extreme',
            name       : 'Ice Wall Climb',
            startDate  : '2025-01-12T14:00:00',
            endDate    : '2025-01-12T18:00:00'
        },
        {
            id         : 'c9f0b04c-edd5-4fdc-a7fc-e579b8f3ec74',
            resourceId : 'extreme',
            name       : 'Adrenaline Zone',
            startDate  : '2025-01-09T14:00:00',
            endDate    : '2025-01-09T15:00:00'
        },
        {
            id         : '8d45bb3f-a4e7-4215-8459-48f8915c0a0a',
            resourceId : 'music',
            name       : 'Jazz Night',
            startDate  : '2025-01-17T13:00:00',
            endDate    : '2025-01-17T16:00:00'
        },
        {
            id         : 'ad1b5f13-038b-40f5-ba8c-b8eb65931dc6',
            resourceId : 'extreme',
            name       : 'Adrenaline Zone',
            startDate  : '2025-02-12T18:00:00',
            endDate    : '2025-02-12T20:00:00'
        },
        {
            id         : '7b889294-336b-4888-b11b-7985a054a9c0',
            resourceId : 'extreme',
            name       : 'Adrenaline Zone',
            startDate  : '2025-02-10T12:00:00',
            endDate    : '2025-02-10T14:00:00'
        },
        {
            id         : '6a47dd62-f0b5-4348-93e8-48ab097bfb22',
            resourceId : 'music',
            name       : 'Synthwave Escape',
            startDate  : '2025-02-17T15:00:00',
            endDate    : '2025-02-17T18:00:00'
        },
        {
            id         : '70809ad9-eefc-497c-bc55-6722ef851869',
            resourceId : 'motor',
            name       : 'Speed Summit',
            startDate  : '2025-02-24T18:00:00',
            endDate    : '2025-02-24T22:00:00'
        },
        {
            id         : 'd5aa5e4b-f333-4e43-ba9c-bde0e216b245',
            resourceId : 'music',
            name       : 'Jazz Night',
            startDate  : '2025-02-07T15:00:00',
            endDate    : '2025-02-07T19:00:00'
        },
        {
            id         : '810d3541-47e1-4acf-b276-9e7127bdca84',
            resourceId : 'motor',
            name       : 'Nitro Run',
            startDate  : '2025-02-16T13:00:00',
            endDate    : '2025-02-16T15:00:00'
        },
        {
            id         : 'f9af22e8-28ab-4869-8d92-18527b63c904',
            resourceId : 'extreme',
            name       : 'Adrenaline Zone',
            startDate  : '2025-02-19T13:00:00',
            endDate    : '2025-02-19T14:00:00'
        },
        {
            id         : '6808b1d3-4bac-4f52-8ade-3e9d6d86afa2',
            resourceId : 'music',
            name       : 'Jazz Night',
            startDate  : '2025-02-06T11:00:00',
            endDate    : '2025-02-06T15:00:00'
        },
        {
            id         : '5959f1bb-52a2-4dd4-b2d3-d3ba6faedb11',
            resourceId : 'motor',
            name       : 'Grand Prix Drift',
            startDate  : '2025-02-11T10:00:00',
            endDate    : '2025-02-11T12:00:00'
        },
        {
            id         : '6de0fa75-e516-4291-935d-775635a76db5',
            resourceId : 'music',
            name       : 'Synthwave Escape',
            startDate  : '2025-02-27T13:00:00',
            endDate    : '2025-02-27T17:00:00'
        },
        {
            id         : 'b48b1972-ed29-4327-9d44-39caa6139885',
            resourceId : 'extreme',
            name       : 'Sky Drop',
            startDate  : '2025-03-01T10:00:00',
            endDate    : '2025-03-01T11:00:00'
        },
        {
            id         : 'fad480c6-1c56-4822-bde6-030f2a61e43e',
            resourceId : 'music',
            name       : 'Soundblast',
            startDate  : '2025-03-11T18:00:00',
            endDate    : '2025-03-11T19:00:00'
        },
        {
            id         : 'a7e12ac5-7dc8-4398-972d-64220b6ab4f1',
            resourceId : 'motor',
            name       : 'Turbo Trials',
            startDate  : '2025-03-20T10:00:00',
            endDate    : '2025-03-20T11:00:00'
        },
        {
            id         : '5082dca3-a68f-4a29-bc83-edcb34dd6cd7',
            resourceId : 'music',
            name       : 'Jazz Night',
            startDate  : '2025-03-27T13:00:00',
            endDate    : '2025-03-27T14:00:00'
        },
        {
            id         : '83cb9970-f752-4438-96ee-cd450b747e0c',
            resourceId : 'extreme',
            name       : 'Sky Drop',
            startDate  : '2025-03-21T13:00:00',
            endDate    : '2025-03-21T17:00:00'
        },
        {
            id         : 'a1836321-1d75-461f-bf17-dad319efaa12',
            resourceId : 'music',
            name       : 'Rock the Hill',
            startDate  : '2025-03-28T12:00:00',
            endDate    : '2025-03-28T14:00:00'
        },
        {
            id         : 'f605acb2-8478-4636-aa74-667b189a8c9c',
            resourceId : 'extreme',
            name       : 'Adrenaline Zone',
            startDate  : '2025-03-06T11:00:00',
            endDate    : '2025-03-06T15:00:00'
        },
        {
            id         : 'a962a404-f90b-47bb-b8c2-3454c5db0a82',
            resourceId : 'extreme',
            name       : 'Adrenaline Zone',
            startDate  : '2025-03-22T13:00:00',
            endDate    : '2025-03-22T14:00:00'
        },
        {
            id         : '1e52fc3f-9c6a-4b08-8d20-14acd9f9635b',
            resourceId : 'motor',
            name       : 'Turbo Trials',
            startDate  : '2025-03-02T12:00:00',
            endDate    : '2025-03-02T15:00:00'
        },
        {
            id         : '90b3e348-45de-4a88-aa77-f3b6673aab15',
            resourceId : 'motor',
            name       : 'Turbo Trials',
            startDate  : '2025-03-10T17:00:00',
            endDate    : '2025-03-10T20:00:00'
        },
        {
            id         : '02d31e0f-bb51-4f42-b012-3b6c7e9864ca',
            resourceId : 'extreme',
            name       : 'Ice Wall Climb',
            startDate  : '2025-04-16T18:00:00',
            endDate    : '2025-04-16T19:00:00'
        },
        {
            id         : '93b120e2-2f50-4a9e-85ef-ffbcd2b47ff5',
            resourceId : 'extreme',
            name       : 'Extreme Heights',
            startDate  : '2025-04-30T14:00:00',
            endDate    : '2025-04-30T17:00:00'
        },
        {
            id         : '766b8644-a7e7-4089-b230-b6d0cee3eaf6',
            resourceId : 'music',
            name       : 'Rock the Hill',
            startDate  : '2025-04-12T12:00:00',
            endDate    : '2025-04-12T14:00:00'
        },
        {
            id         : 'e67a6d63-02b7-4e02-8c6b-e824627f4d87',
            resourceId : 'extreme',
            name       : 'Sky Drop',
            startDate  : '2025-04-11T13:00:00',
            endDate    : '2025-04-11T14:00:00'
        },
        {
            id         : 'a6ef7a1d-c7f9-4d50-92cb-4f1fec935ed9',
            resourceId : 'music',
            name       : 'Soundblast',
            startDate  : '2025-04-24T12:00:00',
            endDate    : '2025-04-24T14:00:00'
        },
        {
            id         : '3263a127-58cd-442b-bbfc-2bea653a5fb7',
            resourceId : 'extreme',
            name       : 'Ice Wall Climb',
            startDate  : '2025-04-19T16:00:00',
            endDate    : '2025-04-19T18:00:00'
        },
        {
            id         : '593ab488-0d5b-4ab5-8b91-914a5ee4261d',
            resourceId : 'motor',
            name       : 'Turbo Trials',
            startDate  : '2025-04-17T18:00:00',
            endDate    : '2025-04-17T21:00:00'
        },
        {
            id         : 'd904ce87-765f-497e-8b1b-e14faee12776',
            resourceId : 'music',
            name       : 'Jazz Night',
            startDate  : '2025-04-13T18:00:00',
            endDate    : '2025-04-13T20:00:00'
        },
        {
            id         : '6fa0fde4-bde7-4036-af9a-b9f68feae162',
            resourceId : 'music',
            name       : 'Soundblast',
            startDate  : '2025-04-25T16:00:00',
            endDate    : '2025-04-25T17:00:00'
        },
        {
            id         : 'e5d6d5c0-5f15-4981-be4e-0089617e88f5',
            resourceId : 'motor',
            name       : 'Turbo Trials',
            startDate  : '2025-04-21T11:00:00',
            endDate    : '2025-04-21T12:00:00'
        },
        {
            id         : '8762f18d-2515-4f86-a596-1b9760b456d3',
            resourceId : 'motor',
            name       : 'Nitro Run',
            startDate  : '2025-04-29T10:00:00',
            endDate    : '2025-04-29T11:00:00'
        },
        {
            id         : '82ed2a4a-85d8-4488-9540-b6cd9f2c417d',
            resourceId : 'music',
            name       : 'Rock the Hill',
            startDate  : '2025-04-09T16:00:00',
            endDate    : '2025-04-09T19:00:00'
        },
        {
            id         : '49b1ba71-79be-4909-ba61-c0df884da1a8',
            resourceId : 'extreme',
            name       : 'Extreme Heights',
            startDate  : '2025-05-06T17:00:00',
            endDate    : '2025-05-06T20:00:00'
        },
        {
            id         : '49c5bb91-e6c9-4494-be42-169f6907f955',
            resourceId : 'extreme',
            name       : 'Sky Drop',
            startDate  : '2025-05-28T16:00:00',
            endDate    : '2025-05-28T17:00:00'
        },
        {
            id         : '3f571606-f4c9-4338-8b40-3cc89f19c951',
            resourceId : 'motor',
            name       : 'Speed Summit',
            startDate  : '2025-05-07T15:00:00',
            endDate    : '2025-05-07T17:00:00'
        },
        {
            id         : 'bb44cd87-385c-4fb2-9a1b-de29bf8823d1',
            resourceId : 'extreme',
            name       : 'Extreme Heights',
            startDate  : '2025-05-30T13:00:00',
            endDate    : '2025-05-30T17:00:00'
        },
        {
            id         : '4c4a42a1-1539-4e57-9c35-cce484c89a7e',
            resourceId : 'extreme',
            name       : 'Adrenaline Zone',
            startDate  : '2025-05-27T14:00:00',
            endDate    : '2025-05-27T16:00:00'
        },
        {
            id         : '47370a81-610e-4b52-9399-14e5a870a882',
            resourceId : 'music',
            name       : 'Synthwave Escape',
            startDate  : '2025-05-13T18:00:00',
            endDate    : '2025-05-13T21:00:00'
        },
        {
            id         : '3db71de3-76f7-4beb-a45d-cf268cd47daa',
            resourceId : 'motor',
            name       : 'Speed Summit',
            startDate  : '2025-05-21T17:00:00',
            endDate    : '2025-05-21T19:00:00'
        },
        {
            id         : 'edbf0b74-2d6b-4ab9-b313-3e6f4d924cae',
            resourceId : 'music',
            name       : 'Jazz Night',
            startDate  : '2025-05-29T15:00:00',
            endDate    : '2025-05-29T17:00:00'
        },
        {
            id         : '79b44a67-8845-448b-a4e7-4dc39c883c21',
            resourceId : 'extreme',
            name       : 'Ice Wall Climb',
            startDate  : '2025-05-10T18:00:00',
            endDate    : '2025-05-10T22:00:00'
        },
        {
            id         : '2f19a4af-3b51-40a2-b287-0c724390a52e',
            resourceId : 'motor',
            name       : 'Nitro Run',
            startDate  : '2025-05-22T12:00:00',
            endDate    : '2025-05-22T14:00:00'
        },
        {
            id         : 'a096b2bb-2f53-4ccf-990b-638faab7e485',
            resourceId : 'motor',
            name       : 'Turbo Trials',
            startDate  : '2025-06-16T17:00:00',
            endDate    : '2025-06-16T21:00:00'
        },
        {
            id         : '6b319b88-1496-40e7-a35a-d5f8a39c42ca',
            resourceId : 'extreme',
            name       : 'Extreme Heights',
            startDate  : '2025-06-17T17:00:00',
            endDate    : '2025-06-17T21:00:00'
        },
        {
            id         : 'e5b7a16a-e18b-454d-af84-05c34bd3b4fa',
            resourceId : 'motor',
            name       : 'Nitro Run',
            startDate  : '2025-06-18T15:00:00',
            endDate    : '2025-06-18T16:00:00'
        },
        {
            id         : '0a28b7ba-2d6c-4e3c-afcc-61336623aad2',
            resourceId : 'music',
            name       : 'Synthwave Escape',
            startDate  : '2025-06-04T17:00:00',
            endDate    : '2025-06-04T21:00:00'
        },
        {
            id         : 'd413eda6-2c1f-44ca-b7d8-ba892d43cd82',
            resourceId : 'motor',
            name       : 'Grand Prix Drift',
            startDate  : '2025-06-24T18:00:00',
            endDate    : '2025-06-24T19:00:00'
        },
        {
            id         : '0b4ba89c-8839-4b5e-9c09-76a4761a6a18',
            resourceId : 'extreme',
            name       : 'Ice Wall Climb',
            startDate  : '2025-06-21T16:00:00',
            endDate    : '2025-06-21T19:00:00'
        },
        {
            id         : '74f6cfb3-df47-40fa-a534-bd855999d963',
            resourceId : 'music',
            name       : 'Soundblast',
            startDate  : '2025-06-02T13:00:00',
            endDate    : '2025-06-02T16:00:00'
        },
        {
            id         : 'c152305f-07c8-47c1-8d45-9966faa5d382',
            resourceId : 'motor',
            name       : 'Grand Prix Drift',
            startDate  : '2025-06-25T13:00:00',
            endDate    : '2025-06-25T17:00:00'
        },
        {
            id         : '9312e405-c2f9-4b64-a03d-1b887dc627e2',
            resourceId : 'motor',
            name       : 'Nitro Run',
            startDate  : '2025-06-05T14:00:00',
            endDate    : '2025-06-05T15:00:00'
        },
        {
            id         : '97834bde-9a91-4221-93f7-82ff29efd2f8',
            resourceId : 'motor',
            name       : 'Speed Summit',
            startDate  : '2025-06-30T14:00:00',
            endDate    : '2025-06-30T16:00:00'
        },
        {
            id         : '1acc4319-6e88-4c0d-8713-00c40b48030e',
            resourceId : 'motor',
            name       : 'Turbo Trials',
            startDate  : '2025-06-03T17:00:00',
            endDate    : '2025-06-03T19:00:00'
        },
        {
            id         : '661647e1-17d4-4280-8291-4eadd5be4a37',
            resourceId : 'music',
            name       : 'Jazz Night',
            startDate  : '2025-06-14T11:00:00',
            endDate    : '2025-06-14T13:00:00'
        },
        {
            id         : 'a085cbfc-a9e3-40b7-978a-df666f675af4',
            resourceId : 'extreme',
            name       : 'Adrenaline Zone',
            startDate  : '2025-06-12T11:00:00',
            endDate    : '2025-06-12T13:00:00'
        },
        {
            id         : 'a69fd216-9b79-4106-8d1f-41196a8be36e',
            resourceId : 'motor',
            name       : 'Turbo Trials',
            startDate  : '2025-07-03T16:00:00',
            endDate    : '2025-07-03T18:00:00'
        },
        {
            id         : '67cb60a2-48eb-43d5-842c-adb0691f6dc8',
            resourceId : 'motor',
            name       : 'Speed Summit',
            startDate  : '2025-07-17T10:00:00',
            endDate    : '2025-07-17T14:00:00'
        },
        {
            id         : 'c2620753-dc88-4d29-aceb-b2ad5bea3f2b',
            resourceId : 'motor',
            name       : 'Turbo Trials',
            startDate  : '2025-07-14T11:00:00',
            endDate    : '2025-07-14T13:00:00'
        },
        {
            id         : '34abc596-24c2-4988-ba5f-18606470e933',
            resourceId : 'motor',
            name       : 'Speed Summit',
            startDate  : '2025-07-24T10:00:00',
            endDate    : '2025-07-24T14:00:00'
        },
        {
            id         : 'db75eb7e-870f-4385-8d5c-7aaee65af071',
            resourceId : 'motor',
            name       : 'Turbo Trials',
            startDate  : '2025-07-10T16:00:00',
            endDate    : '2025-07-10T18:00:00'
        },
        {
            id         : '7077e4c5-ee9b-4193-b14f-e8f7c39c894f',
            resourceId : 'music',
            name       : 'Rock the Hill',
            startDate  : '2025-07-30T16:00:00',
            endDate    : '2025-07-30T20:00:00'
        },
        {
            id         : '1efca268-140e-43d0-817b-7379d2c90457',
            resourceId : 'music',
            name       : 'Synthwave Escape',
            startDate  : '2025-07-19T12:00:00',
            endDate    : '2025-07-19T14:00:00'
        },
        {
            id         : 'f40c1762-3ec3-451c-a42e-247db7b965d7',
            resourceId : 'extreme',
            name       : 'Extreme Heights',
            startDate  : '2025-07-29T10:00:00',
            endDate    : '2025-07-29T11:00:00'
        },
        {
            id         : '1f6e627f-42aa-4dd0-ad84-291b2d13813a',
            resourceId : 'motor',
            name       : 'Nitro Run',
            startDate  : '2025-07-07T17:00:00',
            endDate    : '2025-07-07T20:00:00'
        },
        {
            id         : '629d375a-5c30-4a65-b19c-8e3e4ee1a71c',
            resourceId : 'motor',
            name       : 'Turbo Trials',
            startDate  : '2025-07-11T10:00:00',
            endDate    : '2025-07-11T11:00:00'
        },
        {
            id         : '0b430c28-d368-45d0-b581-0a88aa9f2efb',
            resourceId : 'motor',
            name       : 'Grand Prix Drift',
            startDate  : '2025-07-06T17:00:00',
            endDate    : '2025-07-06T19:00:00'
        },
        {
            id         : 'e83ac4b8-c251-43cc-b839-ef83414e3132',
            resourceId : 'motor',
            name       : 'Turbo Trials',
            startDate  : '2025-07-12T18:00:00',
            endDate    : '2025-07-12T19:00:00'
        },
        {
            id         : '03e5108c-e259-4f3e-85c0-0354ea3ce039',
            resourceId : 'motor',
            name       : 'Grand Prix Drift',
            startDate  : '2025-07-21T12:00:00',
            endDate    : '2025-07-21T13:00:00'
        },
        {
            id         : '7bae30fb-27d2-47f5-a8d7-a1cbcd2d5f98',
            resourceId : 'music',
            name       : 'Rock the Hill',
            startDate  : '2025-08-19T15:00:00',
            endDate    : '2025-08-19T17:00:00'
        },
        {
            id         : '8c192c96-a07f-4897-b7d1-f7c98c9f1796',
            resourceId : 'music',
            name       : 'Synthwave Escape',
            startDate  : '2025-08-16T11:00:00',
            endDate    : '2025-08-16T13:00:00'
        },
        {
            id         : '05068a57-a69b-41c3-9115-8bcc998c0c1b',
            resourceId : 'motor',
            name       : 'Nitro Run',
            startDate  : '2025-08-14T13:00:00',
            endDate    : '2025-08-14T16:00:00'
        },
        {
            id         : 'fcc596b4-6623-44c5-ade4-18a822f193ee',
            resourceId : 'extreme',
            name       : 'Ice Wall Climb',
            startDate  : '2025-08-13T11:00:00',
            endDate    : '2025-08-13T13:00:00'
        },
        {
            id         : '9124b3a3-b486-42b2-8f90-4f98ba3cbb12',
            resourceId : 'music',
            name       : 'Synthwave Escape',
            startDate  : '2025-08-25T17:00:00',
            endDate    : '2025-08-25T21:00:00'
        },
        {
            id         : 'f7445954-6cfd-4fec-b152-a7314feaebd0',
            resourceId : 'extreme',
            name       : 'Ice Wall Climb',
            startDate  : '2025-08-21T13:00:00',
            endDate    : '2025-08-21T16:00:00'
        },
        {
            id         : '87ec09b8-3ff6-4018-b764-54db9cdb1d7e',
            resourceId : 'motor',
            name       : 'Grand Prix Drift',
            startDate  : '2025-08-26T18:00:00',
            endDate    : '2025-08-26T20:00:00'
        },
        {
            id         : '85f95cdc-982c-41fb-bff9-574ef114748c',
            resourceId : 'motor',
            name       : 'Turbo Trials',
            startDate  : '2025-08-05T17:00:00',
            endDate    : '2025-08-05T19:00:00'
        },
        {
            id         : '20ed89d0-7820-4276-9c3d-8f968f85c619',
            resourceId : 'motor',
            name       : 'Grand Prix Drift',
            startDate  : '2025-08-23T17:00:00',
            endDate    : '2025-08-23T18:00:00'
        },
        {
            id         : 'dab9dc64-e4af-4746-92c0-6fd800dc3179',
            resourceId : 'extreme',
            name       : 'Adrenaline Zone',
            startDate  : '2025-08-12T12:00:00',
            endDate    : '2025-08-12T15:00:00'
        },
        {
            id         : '1c0d399f-123c-4337-9fea-9b8dca47b1f3',
            resourceId : 'extreme',
            name       : 'Extreme Heights',
            startDate  : '2025-09-26T15:00:00',
            endDate    : '2025-09-26T18:00:00'
        },
        {
            id         : '4c4012df-6a74-4e1b-a236-653269fb1552',
            resourceId : 'extreme',
            name       : 'Sky Drop',
            startDate  : '2025-09-27T14:00:00',
            endDate    : '2025-09-27T17:00:00'
        },
        {
            id         : 'a7d167e7-90de-42bc-9902-bb5c960d868c',
            resourceId : 'motor',
            name       : 'Speed Summit',
            startDate  : '2025-09-15T17:00:00',
            endDate    : '2025-09-15T19:00:00'
        },
        {
            id         : 'c3c6ea73-d2de-4305-9583-bac3e6996b6c',
            resourceId : 'extreme',
            name       : 'Extreme Heights',
            startDate  : '2025-09-08T12:00:00',
            endDate    : '2025-09-08T13:00:00'
        },
        {
            id         : '45935f88-7572-47dd-93c3-64ca7c6bbe34',
            resourceId : 'music',
            name       : 'Synthwave Escape',
            startDate  : '2025-09-18T16:00:00',
            endDate    : '2025-09-18T20:00:00'
        },
        {
            id         : '762dc019-432d-462b-81c6-ba0dadb80038',
            resourceId : 'music',
            name       : 'Synthwave Escape',
            startDate  : '2025-09-21T18:00:00',
            endDate    : '2025-09-21T22:00:00'
        },
        {
            id         : '64720c15-a693-4adc-bcfc-eff816afe0cf',
            resourceId : 'extreme',
            name       : 'Sky Drop',
            startDate  : '2025-09-25T15:00:00',
            endDate    : '2025-09-25T18:00:00'
        },
        {
            id         : '151bbe1e-c43a-4401-80b6-e7731bf03dcd',
            resourceId : 'music',
            name       : 'Jazz Night',
            startDate  : '2025-09-23T15:00:00',
            endDate    : '2025-09-23T16:00:00'
        },
        {
            id         : 'b32eed50-9366-40d6-b5cb-555ad54eb7ec',
            resourceId : 'extreme',
            name       : 'Adrenaline Zone',
            startDate  : '2025-09-16T17:00:00',
            endDate    : '2025-09-16T20:00:00'
        },
        {
            id         : '85644614-e083-438b-88b3-6ab46e131df7',
            resourceId : 'motor',
            name       : 'Turbo Trials',
            startDate  : '2025-09-01T11:00:00',
            endDate    : '2025-09-01T14:00:00'
        },
        {
            id         : '42f16e8e-6b67-451e-a43c-a6cfa5548ff6',
            resourceId : 'music',
            name       : 'Synthwave Escape',
            startDate  : '2025-09-11T10:00:00',
            endDate    : '2025-09-11T13:00:00'
        },
        {
            id         : '90a8cdc7-398b-4b4f-b202-d223ff23d8ea',
            resourceId : 'motor',
            name       : 'Grand Prix Drift',
            startDate  : '2025-09-22T15:00:00',
            endDate    : '2025-09-22T18:00:00'
        },
        {
            id         : '7ee09c37-a716-41b4-b299-32430dd50619',
            resourceId : 'music',
            name       : 'Synthwave Escape',
            startDate  : '2025-09-02T16:00:00',
            endDate    : '2025-09-02T18:00:00'
        },
        {
            id         : '903874b9-7755-41d7-ac6a-17c947e65b1f',
            resourceId : 'motor',
            name       : 'Speed Summit',
            startDate  : '2025-10-11T17:00:00',
            endDate    : '2025-10-11T21:00:00'
        },
        {
            id         : 'ba1b6841-a424-44a7-93fa-de4bf96ab6e3',
            resourceId : 'motor',
            name       : 'Grand Prix Drift',
            startDate  : '2025-10-25T12:00:00',
            endDate    : '2025-10-25T13:00:00'
        },
        {
            id         : '5b289b07-f95d-456e-898e-33fef02fecac',
            resourceId : 'extreme',
            name       : 'Extreme Heights',
            startDate  : '2025-10-31T16:00:00',
            endDate    : '2025-10-31T20:00:00'
        },
        {
            id         : '761d8f45-cb9c-42d8-9ffe-4eb852169507',
            resourceId : 'music',
            name       : 'Rock the Hill',
            startDate  : '2025-10-28T12:00:00',
            endDate    : '2025-10-28T14:00:00'
        },
        {
            id         : 'f590ad57-6d45-4930-a55f-0caef8e78407',
            resourceId : 'extreme',
            name       : 'Adrenaline Zone',
            startDate  : '2025-10-30T13:00:00',
            endDate    : '2025-10-30T14:00:00'
        },
        {
            id         : '2b5e47a9-5b31-40b0-bc72-8724e4788abe',
            resourceId : 'extreme',
            name       : 'Extreme Heights',
            startDate  : '2025-10-07T12:00:00',
            endDate    : '2025-10-07T13:00:00'
        },
        {
            id         : '1fc9bab3-6119-40d6-bbfd-33b387083fe7',
            resourceId : 'music',
            name       : 'Rock the Hill',
            startDate  : '2025-10-24T12:00:00',
            endDate    : '2025-10-24T16:00:00'
        },
        {
            id         : '2dd69193-140b-4fe3-91cc-16fc8b2f0345',
            resourceId : 'extreme',
            name       : 'Sky Drop',
            startDate  : '2025-10-04T10:00:00',
            endDate    : '2025-10-04T13:00:00'
        },
        {
            id         : 'eb749369-6933-47bd-8199-ab3d15f4728e',
            resourceId : 'extreme',
            name       : 'Extreme Heights',
            startDate  : '2025-10-15T15:00:00',
            endDate    : '2025-10-15T18:00:00'
        },
        {
            id         : '24998d63-0782-4aca-9c24-885818e5d62f',
            resourceId : 'music',
            name       : 'Jazz Night',
            startDate  : '2025-10-14T10:00:00',
            endDate    : '2025-10-14T14:00:00'
        },
        {
            id         : '3c7bc503-7951-45ff-ab87-0bfbbb588981',
            resourceId : 'extreme',
            name       : 'Sky Drop',
            startDate  : '2025-10-08T16:00:00',
            endDate    : '2025-10-08T17:00:00'
        },
        {
            id         : 'd58437cc-1577-43a2-8c43-b3a54fbf88e2',
            resourceId : 'music',
            name       : 'Rock the Hill',
            startDate  : '2025-10-19T16:00:00',
            endDate    : '2025-10-19T19:00:00'
        },
        {
            id         : 'd0824f89-3835-46b7-96f1-5a131426aac1',
            resourceId : 'music',
            name       : 'Rock the Hill',
            startDate  : '2025-11-22T11:00:00',
            endDate    : '2025-11-22T13:00:00'
        },
        {
            id         : 'c6b8fefc-6603-461f-ae95-66c1c7ac8bdf',
            resourceId : 'extreme',
            name       : 'Sky Drop',
            startDate  : '2025-11-12T12:00:00',
            endDate    : '2025-11-12T13:00:00'
        },
        {
            id         : '654f0bf1-0092-40c7-b936-6f11e1bbf819',
            resourceId : 'music',
            name       : 'Jazz Night',
            startDate  : '2025-11-16T15:00:00',
            endDate    : '2025-11-16T16:00:00'
        },
        {
            id         : '29dfc2fa-b269-4672-9a28-c8ccd8c0c359',
            resourceId : 'music',
            name       : 'Jazz Night',
            startDate  : '2025-11-19T14:00:00',
            endDate    : '2025-11-19T17:00:00'
        },
        {
            id         : '27f66b45-fbc2-45ac-9699-cc9c0fdf0e26',
            resourceId : 'music',
            name       : 'Rock the Hill',
            startDate  : '2025-11-15T10:00:00',
            endDate    : '2025-11-15T13:00:00'
        },
        {
            id         : '7ba34400-de19-4474-af10-cf3fd5bef68a',
            resourceId : 'extreme',
            name       : 'Adrenaline Zone',
            startDate  : '2025-11-14T12:00:00',
            endDate    : '2025-11-14T13:00:00'
        },
        {
            id         : '06444cdf-eaf2-4bb8-ae14-9ab8ef05c593',
            resourceId : 'music',
            name       : 'Soundblast',
            startDate  : '2025-11-01T13:00:00',
            endDate    : '2025-11-01T17:00:00'
        },
        {
            id         : '1265ffc1-aaef-4c0e-9898-28c93e893df5',
            resourceId : 'music',
            name       : 'Soundblast',
            startDate  : '2025-11-29T12:00:00',
            endDate    : '2025-11-29T13:00:00'
        },
        {
            id         : '71834033-e7ca-40a0-b84d-69c0dd7f9f47',
            resourceId : 'music',
            name       : 'Synthwave Escape',
            startDate  : '2025-11-11T18:00:00',
            endDate    : '2025-11-11T22:00:00'
        },
        {
            id         : '3b2502ba-4b49-425a-a83a-bc8b3a63d310',
            resourceId : 'motor',
            name       : 'Grand Prix Drift',
            startDate  : '2025-11-03T12:00:00',
            endDate    : '2025-11-03T14:00:00'
        },
        {
            id         : '0bfc7b38-8539-4d42-8409-1e899d838157',
            resourceId : 'music',
            name       : 'Jazz Night',
            startDate  : '2025-11-04T12:00:00',
            endDate    : '2025-11-04T13:00:00'
        },
        {
            id         : 'e559a698-dee2-4e48-8bc4-f631ed35c3d9',
            resourceId : 'motor',
            name       : 'Grand Prix Drift',
            startDate  : '2025-12-02T10:00:00',
            endDate    : '2025-12-02T11:00:00'
        },
        {
            id         : '1302bdec-1b15-4738-8dbd-077d91109aa9',
            resourceId : 'extreme',
            name       : 'Ice Wall Climb',
            startDate  : '2025-12-26T15:00:00',
            endDate    : '2025-12-26T16:00:00'
        },
        {
            id         : '2f104c86-9a52-482a-96ba-0dfac4282c66',
            resourceId : 'extreme',
            name       : 'Extreme Heights',
            startDate  : '2025-12-27T16:00:00',
            endDate    : '2025-12-27T19:00:00'
        },
        {
            id         : 'f485cbdd-a1f6-484e-a0db-db02e4f8190e',
            resourceId : 'extreme',
            name       : 'Extreme Heights',
            startDate  : '2025-12-28T17:00:00',
            endDate    : '2025-12-28T20:00:00'
        },
        {
            id         : 'f029bdc4-c6a1-414a-9533-971ae713d8bd',
            resourceId : 'extreme',
            name       : 'Ice Wall Climb',
            startDate  : '2025-12-18T15:00:00',
            endDate    : '2025-12-18T17:00:00'
        },
        {
            id         : '6ce7878f-ab32-48af-9662-a16f9245cbdb',
            resourceId : 'music',
            name       : 'Soundblast',
            startDate  : '2025-12-22T11:00:00',
            endDate    : '2025-12-22T15:00:00'
        },
        {
            id         : '8ba75857-172b-415e-b27f-f775157f0cc9',
            resourceId : 'motor',
            name       : 'Nitro Run',
            startDate  : '2025-12-25T14:00:00',
            endDate    : '2025-12-25T15:00:00'
        },
        {
            id         : '7e714193-4fc0-4607-a50a-cd2822177f77',
            resourceId : 'music',
            name       : 'Synthwave Escape',
            startDate  : '2025-12-01T14:00:00',
            endDate    : '2025-12-01T17:00:00'
        },
        {
            id         : '48b1b682-0071-41a8-bf6f-39afa85418d7',
            resourceId : 'extreme',
            name       : 'Ice Wall Climb',
            startDate  : '2025-12-31T12:00:00',
            endDate    : '2025-12-31T16:00:00'
        },
        {
            id         : 'cffc0eaf-e922-469c-999e-442206cf04d1',
            resourceId : 'motor',
            name       : 'Turbo Trials',
            startDate  : '2025-12-12T12:00:00',
            endDate    : '2025-12-12T16:00:00'
        },
        {
            id         : 'a8b12fa0-0f4b-441f-b2e6-cfa9a75466fb',
            resourceId : 'extreme',
            name       : 'Ice Wall Climb',
            startDate  : '2025-12-14T15:00:00',
            endDate    : '2025-12-14T19:00:00'
        }
    ]
});

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

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

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

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

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

Grouping

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

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

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

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

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

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

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

Drag/drop and autoCreate

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

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

Configs

165

Common

listenersEvents

Other

groupHeaderAriaMonthFormat: String= 'MMM YYYY'Also a property

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

groupHeaderRenderer: function | String

A function or the name of a function in the view's ownership hierarchy which is used to produce the group header content for event groups in month blocks.

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

By default, a group header event bar will be rendered with the group name, a count of the number of events in the group and an icon indicating whether the group is collapsed or expanded. The group header will have the class b-cal-event-bar-group and the class b-cal-event-bar-collapsed if the group is collapsed.

Parameter	Type	Description
`detail`	Object	An object containing the details for rendering the group header.
`detail.view`	MonthGrid	The MonthGrid instance.
`detail.eventRecord`	Model	The event group record.
`detail.renderData`	Object	A data object containing properties that will be used to create the event element
`detail.renderData.style`	Object	The style property is an object containing style properties for the event element
`detail.renderData.cls`	Object	The cls property is an object whose property names will be added to the event element if the property value is truthy
`detail.renderData.iconStyle`	Object	The iconStyle property is an object containing style properties for the icon element if an icon element is to be used
`detail.renderData.iconCls`	Object	The iconCls property is an object whose property names will be added to the icon element. Initially set from the event record's iconCls. Can be mutated by the renderer. If null, or no properties are set, no icon will be rendered
`detail.renderData.eventColor`	String	Color to be applied to the event
`detail.renderData.dataset`	Object	An object which produces the `dataset` of the resulting event bar

Returns: DomConfig | DomConfig[] | String | null -

The content to be used for the group header body.

headerMonthFormat: String= 'MMM'Also a property

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

hideEventScroll: Boolean= false

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

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

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

minMonthHeight: Number | StringAlso a property

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

monthEventStore: StoreConfig

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

The Stores may be accessed using the monthEventStores property.

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

Mutating the value of this property will cause the existing monthEventStores to be recreated. This will cause the view to refresh.

monthHeaderRenderer: function | String

A function, or the name of a function in the view's ownership hierarchy, which is used to produce the month header content for month event blocks.

An implementation may call the defaultMonthHeaderRenderer method to get the default DomConfig array and mutate the result before returning it:

monthHeaderRenderer({ monthEventCount }) {
    // Get the default pair of element configs, month name end event count
    const result = this.defaultMonthHeaderRenderer(...arguments);
    // Replace the text property of the event count element with HTML containing an icon
    result[1].html = `${monthEventCount} <i class="fa fa-external-link"></i>`;
    delete result[1].text;
    return result;
}

Parameter	Type	Description
`detail`	Object	An object containing the details for rendering the month header.
`detail.view`	MonthGrid	The MonthGrid instance.
`detail.month`	Month	The month object.
`detail.monthEventCount`	Number	The number of events in the month.
`detail.monthEventStore`	Store	The month event store.

Returns: DomConfig | DomConfig[] | String | null -

The content to be used for the month header.

timeFormat: String= 'MMM DD YYYY HH:mm'Also a property

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

viewGap: String | NumberAlso a property

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

activationKeyCalendarMixin

allowDragCreateCalendarMixin

allowDragMoveCalendarMixin

allowDragResizeCalendarMixin

animateTimeShiftCalendarMixin

autoCreateCalendarMixin

callOnFunctionsWidget

catchEventHandlerExceptionsEvents

columnWidget

dateYearView

dayCellNameFormatDayCellRenderer

defaultFocusContainer

defaultScrollOptionsCalendarMixin

descriptionRendererCalendarMixin

detectCSSCompatibilityIssuesWidget

dragUnitCalendarMixin

drawerPanel

emptyCellRendererDayCellRenderer

eventCountTipYearView

eventDotsYearView

eventFilterDayCellCollecter

eventHeightCalendarMixin

eventSorterCalendarMixin

eventSpacingDayCellRenderer

extendAllDayEndDayCalendarMixin

hideNonWorkingDaysCalendarMixin

inputFieldAlignContainer

labelPositionContainer

maxDateCalendarMixin

minDateCalendarMixin

nonWorkingDaysCalendarMixin

overflowButtonRendererDayCellRenderer

overflowPopupDayCellRenderer

overflowPopupTriggerDayCellRenderer

pastEventClsCalendarMixin

renditionContainer

resourceImagePathCalendarMixin

responsiveResponsive

responsiveRootResponsive

responsiveStateResponsive

responsiveTargetResponsive

rtlRTL

selectorButtonCalendarMixin

selectorMenuItemCalendarMixin

shortDateFormatCalendarMixin

shortDateTimeFormatCalendarMixin

shortEventClsCalendarMixin

shortEventDurationCalendarMixin

showBulletCalendarMixin

showEventsYearView

showResourceAvatarsCalendarMixin

sixWeeksYearView

spanWidget

stackMultiDayEventsDayCellCollecter

syncCalendarDateCalendarMixin

syncViewDateCalendarMixin

weekStartDayCalendarMixin

yearYearView

Accessibility

ariaDescriptionWidget

ariaLabelWidget

keyMapKeyMap

Content

bbarPanel

defaultsContainer

footerPanel

headerPanel

itemsContainer

lazyItemsContainer

namedItemsContainer

stripsPanel

tbarPanel

textContentContainer

toolsPanel

trapFocusPanel

CSS

bodyClsPanel

borderContainer

clsWidget

colorWidget

contentElementClsWidget

htmlClsWidget

itemClsContainer

styleWidget

uiPanel

DOM

adoptWidget

appendToWidget

contentWidget

datasetWidget

htmlWidget

idWidget

insertBeforeWidget

insertFirstWidget

tagWidget

Float & align

alignWidget

anchorWidget

centeredWidget

constrainToWidget

draggableWidget

floatingWidget

hideAnimationWidget

maximizeOnMobileWidget

positionedWidget

scrollActionWidget

showAnimationWidget

xWidget

yWidget

Layout

alignSelfWidget

collapsedPanel

collapsiblePanel

dockWidget

flexWidget

heightWidget

hiddenWidget

hideWhenEmptyContainer

layoutContainer

layoutStyleContainer

marginWidget

maxHeightWidget

maxWidthWidget

minHeightWidget

minWidthWidget

textAlignWidget

weightWidget

widthWidget

misc

tabBarItemsContainer

Misc

bubbleEventsEvents

dataFieldWidget

defaultBindPropertyWidget

disabledWidget

elementAttributesWidget

iconPanel

ignoreParentReadOnlyWidget

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

maskDefaultsWidget

maskedWidget

monitorResizeWidget

ownerWidget

preventTooltipOnTouchWidget

readOnlyWidget

refWidget

rippleWidget

rootElementWidget

showTooltipWhenDisabledWidget

tabWidget

titlePanel

tooltipWidget

Record

autoUpdateRecordContainer

recordContainer

strictRecordMappingContainer

Properties

141

Class hierarchy

isMonthGrid: Boolean= truereadonly

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

isMonthGrid: Boolean= truereadonlystatic

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

isCalendarMixinCalendarMixin

isContainerContainer

isDayCellCollecterDayCellCollecter

isDayCellRendererDayCellRenderer

isDelayableDelayable

isEventsEvents

isKeyMapKeyMap

isLocalizableLocalizable

isPanelPanel

isResponsiveResponsive

isRTLRTL

isStateState

isToolableToolable

isWidgetWidget

isYearViewYearView

Other

groupHeaderAriaMonthFormat: String= 'MMM YYYY'Also a config

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

headerMonthFormat: String= 'MMM'Also a config

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

minMonthHeight: Number | StringAlso a config

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

monthEventStores: Store[]readonly

Returns the twelve Stores which hold the events for each month displayed in this MonthGrid. Each Store is created with the modelClass of the eventStore of the Calendar. The Stores are created using the monthEventStore configuration.

timeFormat: String= 'MMM DD YYYY HH:mm'Also a config

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

viewGap: String | NumberAlso a config

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

$namestaticWidget

allowDragCreateCalendarMixin

allowDragMoveCalendarMixin

allowDragResizeCalendarMixin

animateTimeShiftCalendarMixin

autoCreateCalendarMixin

catchEventHandlerExceptionsEvents

cellMapDayCellRenderer

columnWidget

convertPinchToMousewheelstaticWidget

dayCellClsCalendarMixin

defaultScrollOptionsCalendarMixin

dragUnitCalendarMixin

durationCalendarMixin

eventCountCalendarMixin

eventCountTipYearView

eventDotsYearView

eventSpacingDayCellRenderer

extendAllDayEndDayCalendarMixin

firstItemContainer

firstVisibleCellCalendarMixin

firstVisibleDateCalendarMixin

hasChangesContainer

hiddenNonWorkingDaysCalendarMixin

hideNonWorkingDaysCalendarMixin

inputFieldAlignContainer

isSettingValuesContainer

isStatefulState

isValidContainer

itemsContainer

labelPositionContainer

lastItemContainer

lastVisibleCellCalendarMixin

lastVisibleDateCalendarMixin

maxDateCalendarMixin

minDateCalendarMixin

modeNameCalendarMixin

nonWorkingDaysCalendarMixin

overflowPopupDayCellRenderer

pastEventClsCalendarMixin

renditionContainer

resourceYearView

rtlRTL

shortDateFormatCalendarMixin

shortDateTimeFormatCalendarMixin

showEventsYearView

spanWidget

stackMultiDayEventsDayCellCollecter

stepUnitCalendarMixin

syncCalendarDateCalendarMixin

syncViewDateCalendarMixin

toolsPanel

typestaticWidget

valuesContainer

visibleCellSelectorCalendarMixin

Accessibility

focusVisibleWidget

keyMapKeyMap

Content

bbarPanel

tbarPanel

CSS

clsWidget

DOM

appendToWidget

contentWidget

contentElementWidget

datasetWidget

elementWidget

focusableElementWidget

focusElementWidget

htmlWidget

idWidget

insertBeforeWidget

insertFirstWidget

overflowElementWidget

styleWidget

Float & align

anchorSizeWidget

maximizeOnMobileWidget

xWidget

yWidget

Layout

alignSelfWidget

collapsedPanel

collapsingPanel

expandingPanel

flexWidget

heightWidget

layoutContainer

layoutStyleContainer

marginWidget

maxHeightWidget

maxWidthWidget

minHeightWidget

minWidthWidget

scrollableWidget

widthWidget

Lifecycle

configBase

isConstructingBase

isDestroyedBase

isDestroyingBase

Misc

callOnFunctionsEvents

cellInfoWidget

disabledWidget

localeHelperLocalizable

localeManagerLocalizable

readOnlyWidget

refWidget

tabWidget

titlePanel

tooltipWidget

Record

recordContainer

strictRecordMappingContainer

State

stateState

Visibility

hiddenWidget

isVisibleWidget

Widget hierarchy

containsFocusWidget

nextSiblingWidget

ownerWidget

parentWidget

previousSiblingWidget

visibleChildCountContainer

widgetMapContainer

Functions

Other

defaultGroupHeaderRenderer

The default group header renderer function

This function is used to render the group header for event groups in month blocks if no groupHeaderRenderer is configured. It will return a three element array of DomConfig objects containing:

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

Your configured groupHeaderRenderer may call this to gain access to the default content and mutate the value.

Parameter	Type	Description
`detail`	Object	An object containing the details for rendering the group header.
`detail.view`	MonthGrid	This MonthGrid instance.
`detail.eventRecord`	Model	The event group record.
`detail.renderData`	Object	A data object containing properties that will be used to create the event element
`detail.renderData.style`	Object	The style property is an object containing style properties for the event element
`detail.renderData.cls`	Object	The cls property is an object whose property names will be added to the event element if the property value is truthy
`detail.renderData.iconStyle`	Object	The iconStyle property is an object containing style properties for the icon element if an icon element is to be used
`detail.renderData.iconCls`	Object	The iconCls property is an object whose property names will be added to the icon element. Initially set from the event record's iconCls. Can be mutated by the renderer. If null, or no properties are set, no icon will be rendered
`detail.renderData.eventColor`	String	Color to be applied to the event
`detail.renderData.dataset`	Object	An object which produces the `dataset` of the resulting event bar

Returns: DomConfig[] -

The content to be used for the group header body.

defaultMonthHeaderRenderer

The default month header renderer function.

This function is used to render the header for each month block in the MonthGrid if no monthHeaderRenderer is configured. It returns an array of two DomConfig objects:

The first object represents the month name, with the class b-month-grid-month-header-month-name and the formatted month name as text.
The second object represents the event count, with the class b-month-grid-month-header-event-count and the localized event count as text.

You may call this function from your custom monthHeaderRenderer to obtain the default content and then modify or extend it as needed.

Parameter	Type	Description
`detail`	Object	An object containing the details for rendering the month header.
`detail.month`	Month	The month object, containing at least a `firstDate` property (the first date of the month).
`detail.monthEventCount`	Number	The number of events in the month.

Returns: DomConfig[] -

An array of two DomConfig objects: one for the month name and one for the event count.

addContainer

addListenerEvents

announceAriaLiveWidget

calendarHitTestCalendarMixin

collapsePanelPanel

composeWidget

createEventCalendarMixin

createOnFrameDelayable

disableWidget

enableWidget

exitFullscreenWidget

expandPanelPanel

focusWidget

getAtContainer

getDayElementCalendarMixin

getEventElementCalendarMixin

getEventElementsCalendarMixin

getEventRecordCalendarMixin

getResourceRecordCalendarMixin

getTimeRangesCalendarMixin

getWidgetByIdContainer

hasListenerEvents

insertContainer

isTodayCalendarMixin

LstaticLocalizable

maskWidget

nextCalendarMixin

onEvents

onEventCreatedCalendarMixin

previousCalendarMixin

processWidgetConfigContainer

recomposeWidget

refreshCalendarMixin

refreshSoonCalendarMixin

relayAllEvents

removeContainer

removeAllContainer

removeAllListenersEvents

removeListenerEvents

requestFullscreenWidget

resetValuesContainer

resolveEventRecordCalendarMixin

resumeEventsEvents

revertFocusWidget

scrollToCalendarMixin

setValuesContainer

suspendEventsEvents

triggerEvents

unEvents

unmaskWidget

Configuration

applyDefaultsstaticBase

Events

detachListenersBase

Float & align

alignToWidget

setXYWidget

showByWidget

toFrontWidget

Lifecycle

constructBase

constructorBase

createstaticWidget

destroystaticBase

doDestroyBase

initClassstaticWidget

setConfigBase

Misc

animatePropertyBase

attachTooltipstaticWidget

callbackBase

downloadTestCaseBase

fromElementstaticWidget

fromSelectorstaticWidget

getByIdstaticWidget

isOfTypeNamestaticBase

mixinstaticBase

optionalLstaticLocalizable

resolveCallbackBase

toggleCollapsedPanel

updateLocalizationLocalizable

State

applyStateState

getStateState

loadStateState

saveStateState

Visibility

hideWidget

showWidget

Widget hierarchy

closestWidget

containsWidget

eachAncestorWidget

eachWidgetWidget

ownsWidget

queryWidget

queryAllWidget

upWidget

Events

columnCountChange

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

// Adding a listener using the "on" method
monthGrid.on('columnCountChange', ({ source, columnCount, oldColumnCount }) => {

});

Parameter	Type	Description
`source`	MonthGrid	This MonthGrid instance.
`columnCount`	Number	The new number of columns.
`oldColumnCount`	Number	The previous number of columns.

groupRecordClick

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

// Adding a listener using the "on" method
monthGrid.on('groupRecordClick', ({ source, groupBar, groupRecord, domEvent }) => {

});

Parameter	Type	Description
`source`	MonthGrid	This MonthGrid instance.
`groupBar`	HTMLElement	The group bar element that was clicked.
`groupRecord`	Model	The group record that was clicked.
`domEvent`	Event	The intigating DOM event.

groupRecordContextMenu

Fires when a group record is right clicked.

// Adding a listener using the "on" method
monthGrid.on('groupRecordContextMenu', ({ source, groupBar, groupRecord, domEvent }) => {

});

Parameter	Type	Description
`source`	MonthGrid	This MonthGrid instance.
`groupBar`	HTMLElement	The group bar element that was clicked.
`groupRecord`	Model	The group record that was clicked.
`domEvent`	Event	The intigating DOM event.

groupRecordDblClick

Fires when a group record is double clicked.

// Adding a listener using the "on" method
monthGrid.on('groupRecordDblClick', ({ source, groupBar, groupRecord, domEvent }) => {

});

Parameter	Type	Description
`source`	MonthGrid	This MonthGrid instance.
`groupBar`	HTMLElement	The group bar element that was clicked.
`groupRecord`	Model	The group record that was clicked.
`domEvent`	Event	The intigating DOM event.

groupRecordMouseOut

Fires when a group record is mouseouted.

// Adding a listener using the "on" method
monthGrid.on('groupRecordMouseOut', ({ source, groupBar, groupRecord, domEvent }) => {

});

Parameter	Type	Description
`source`	MonthGrid	This MonthGrid instance.
`groupBar`	HTMLElement	The group bar element that was clicked.
`groupRecord`	Model	The group record that was clicked.
`domEvent`	Event	The intigating DOM event.

groupRecordMouseOver

Fires when a group record is mousovered.

// Adding a listener using the "on" method
monthGrid.on('groupRecordMouseOver', ({ source, groupBar, groupRecord, domEvent }) => {

});

Parameter	Type	Description
`source`	MonthGrid	This MonthGrid instance.
`groupBar`	HTMLElement	The group bar element that was clicked.
`groupRecord`	Model	The group record that was clicked.
`domEvent`	Event	The intigating DOM event.

refresh

Fires when this MonthGrid refreshes.

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

});

Parameter	Type	Description
`source`	MonthGrid	The triggering instance.

resourceClick

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

// Adding a listener using the "on" method
monthGrid.on('resourceClick', ({ source, domEvent, date, resourceElement, resourceRecord }) => {

});

Parameter	Type	Description
`source`	MonthGrid	This MonthGrid instance.
`domEvent`	Event	The initiating DOM event.
`date`	Date	The date of the UI element which contains the event.
`resourceElement`	HTMLElement	The UI element which encapsulates the resource.
`resourceRecord`	ResourceModel	The resource associated with the target element.

beforeAutoCreateCalendarMixin

beforeChangeDateCalendarMixin

beforeDestroyEvents

beforeHideWidget

beforeResponsiveStateChangeResponsive

beforeSetRecordContainer

beforeShowWidget

beforeShowOverflowPopupDayCellRenderer

beforeStateApplyState

beforeStateSaveState

catchAllEvents

cellMapPopulatedDayCellCollecter

collapsePanel

dayCellPopulatedDayCellCollecter

destroyEvents

dirtyStateChangeContainer

elementCreatedWidget

emptyCellClickDayCellRenderer

eventAutoCreatedCalendarMixin

eventPropagateDayCellCollecter

eventsPerCellChangeDayCellRenderer

expandPanel

focusInWidget

focusOutWidget

hideWidget

paintWidget

readOnlyWidget

recomposeWidget

resizeWidget

responsiveStateChangeResponsive

showWidget

showOverflowPopupDayCellRenderer

toolClickPanel

Event handlers

onColumnCountChange

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

new MonthGrid({
    onColumnCountChange({ source, columnCount, oldColumnCount }) {

    }
});

Parameter	Type	Description
`source`	MonthGrid	This MonthGrid instance.
`columnCount`	Number	The new number of columns.
`oldColumnCount`	Number	The previous number of columns.

onGroupRecordClick

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

new MonthGrid({
    onGroupRecordClick({ source, groupBar, groupRecord, domEvent }) {

    }
});

Parameter	Type	Description
`source`	MonthGrid	This MonthGrid instance.
`groupBar`	HTMLElement	The group bar element that was clicked.
`groupRecord`	Model	The group record that was clicked.
`domEvent`	Event	The intigating DOM event.

onGroupRecordContextMenu

Called when a group record is right clicked.

new MonthGrid({
    onGroupRecordContextMenu({ source, groupBar, groupRecord, domEvent }) {

    }
});

Parameter	Type	Description
`source`	MonthGrid	This MonthGrid instance.
`groupBar`	HTMLElement	The group bar element that was clicked.
`groupRecord`	Model	The group record that was clicked.
`domEvent`	Event	The intigating DOM event.

onGroupRecordDblClick

Called when a group record is double clicked.

new MonthGrid({
    onGroupRecordDblClick({ source, groupBar, groupRecord, domEvent }) {

    }
});

Parameter	Type	Description
`source`	MonthGrid	This MonthGrid instance.
`groupBar`	HTMLElement	The group bar element that was clicked.
`groupRecord`	Model	The group record that was clicked.
`domEvent`	Event	The intigating DOM event.

onGroupRecordMouseOut

Called when a group record is mouseouted.

new MonthGrid({
    onGroupRecordMouseOut({ source, groupBar, groupRecord, domEvent }) {

    }
});

Parameter	Type	Description
`source`	MonthGrid	This MonthGrid instance.
`groupBar`	HTMLElement	The group bar element that was clicked.
`groupRecord`	Model	The group record that was clicked.
`domEvent`	Event	The intigating DOM event.

onGroupRecordMouseOver

Called when a group record is mousovered.

new MonthGrid({
    onGroupRecordMouseOver({ source, groupBar, groupRecord, domEvent }) {

    }
});

Parameter	Type	Description
`source`	MonthGrid	This MonthGrid instance.
`groupBar`	HTMLElement	The group bar element that was clicked.
`groupRecord`	Model	The group record that was clicked.
`domEvent`	Event	The intigating DOM event.

onRefresh

Called when this MonthGrid refreshes.

new MonthGrid({
    onRefresh({ source }) {

    }
});

Parameter	Type	Description
`source`	MonthGrid	The triggering instance.

onResourceClick

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

new MonthGrid({
    onResourceClick({ source, domEvent, date, resourceElement, resourceRecord }) {

    }
});

Parameter	Type	Description
`source`	MonthGrid	This MonthGrid instance.
`domEvent`	Event	The initiating DOM event.
`date`	Date	The date of the UI element which contains the event.
`resourceElement`	HTMLElement	The UI element which encapsulates the resource.
`resourceRecord`	ResourceModel	The resource associated with the target element.

onBeforeAutoCreateCalendarMixin

onBeforeChangeDateCalendarMixin

onBeforeDestroyEvents

onBeforeHideWidget

onBeforeResponsiveStateChangeResponsive

onBeforeSetRecordContainer

onBeforeShowWidget

onBeforeShowOverflowPopupDayCellRenderer

onBeforeStateApplyState

onBeforeStateSaveState

onCatchAllEvents

onCellMapPopulatedDayCellCollecter

onCollapsePanel

onDayCellPopulatedDayCellCollecter

onDestroyEvents

onDirtyStateChangeContainer

onElementCreatedWidget

onEmptyCellClickDayCellRenderer

onEventAutoCreatedCalendarMixin

onEventPropagateDayCellCollecter

onEventsPerCellChangeDayCellRenderer

onExpandPanel

onFocusInWidget

onFocusOutWidget

onHideWidget

onPaintWidget

onReadOnlyWidget

onRecomposeWidget

onResizeWidget

onResponsiveStateChangeResponsive

onShowWidget

onShowOverflowPopupDayCellRenderer

onToolClickPanel

Typedefs

AlignSpecWidget

BryntumListenerConfigEvents

CellWidgetContextWidget

ColorWidget

DayCellDayCellCollecter

DelayableConfigDelayable

EventBarDayCellCollecter

KeyMapConfigKeyMap

PanelHeaderPanel

ResponsiveStateResponsive

YearCellYearView

CSS variables

102

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

Inherited

YearView40

Panel21

Container11

Widget20

MonthGrid

Grouping

Drag/drop and autoCreate

Configs

Common

Other

Accessibility

Content

CSS

DOM

Float & align

Layout

misc

Misc

Record

Rendering

Scrolling

State

Properties

Class hierarchy

Other

Accessibility

Content

CSS

DOM

Float & align

Layout

Lifecycle

Misc

Record

State

Visibility

Widget hierarchy

Functions

Other

Configuration

Events

Float & align

Lifecycle

Misc

State

Visibility

Widget hierarchy

Events

Event handlers

Typedefs

CSS variables

Inherited