bryntum / support

An issues-only repository for the Bryntum project management component suite which includes powerful Grid, Scheduler, Calendar, Kanban Task Board and Gantt chart components all built in pure JS / CSS / TypeScript
https://www.bryntum.com
54 stars 6 forks source link

Calendar crashes when `autoRowHeight` and `hideOtherMonthCells` set to true #9939

Closed taauntik closed 1 month ago

taauntik commented 2 months ago

Forum post

Hello Bryntum Support and Community, I've encountered an issue in the Bryntum Calendar while working in month view mode. Specifically, when I configure the calendar with autoRowHeight: true and sixWeeks: false, it triggers an error in the console. I'm reaching out for guidance on how to resolve this issue or for any workarounds you might suggest.

Issue Description: Upon setting the calendar to month mode with the properties autoRowHeight: true and hideOtherMonthCells: true, an unexpected error is logged in the console. This occurs without any further interaction with the calendar. Steps to Reproduce: Initialize the Bryntum Calendar in month view mode. Apply the following configuration options:

javascript
   autoRowHeight: true,
   hideOtherMonthCells: true

Observe the error appearing in the browser's console upon loading the calendar. Related screenshot:

import { Calendar } from '../../build/calendar.module.js?479194';
import shared from '../_shared/shared.module.js?479194';

const calendar = new Calendar({
    // Start life looking at this date
    date : new Date(2024,7, 14),

// 'day', 'week', 'month', etc.
mode : 'month',
modes: {
    month: {
        //sixWeeks: false,
        autoRowHeight: true,
        hideOtherMonthCells: true,
    },
},

   eventStore: {
        data: [
            {startDate: "2024-08-28", endDate: "2024-09-01"},
            {startDate: "2024-09-01", endDate: "2024-09-02"},
            {startDate: "2024-09-01", endDate: "2024-09-01"}
        ],
   },

appendTo : 'container',

// Features named by the properties are included.
// An object is used to configure the feature.
features : {
    eventTooltip : {
        // Configuration options are passed on to the tooltip instance
        // We want the tooltip's left edge aligned to the right edge of the event if possible.
        align : 'l-r'
    }
}
});

Error CallStack:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'dataset')
    at MonthView.getWeekContext (MonthView.js:327:119)
    at MonthView.shrinkwrapWeekRow (MonthView.js:377:35)
    at MonthView.updateAutoRowHeight (MonthView.js:683:35)
    at MonthView.set (Config.js:452:34)
    at MonthView.get (Config.js:542:30)
    at MonthView.getConfig (Base.js:1004:25)
    at MonthView.doRefresh (MonthView.js:888:16)
    at MonthView.refreshNow (CalendarMixin.js:843:14)
    at MonthView.callback (Base.js:732:25)
    at MonthView.triggerPaint (Widget.js:5607:24)
ExtAnimal commented 2 months ago

Suggested code fix in forum thread