Customize config makes resourceCalendar column can't show calendarEditor

[NegativeDearc]

I'm testing from https://bryntum.com/products/schedulerpro/examples/resourcehistogram/

I'm edited the code as below

import { Splitter, SchedulerPro, ProjectModel, Toolbar, ResourceHistogram } from '../../build/schedulerpro.module.js?478494';
import shared from '../_shared/shared.module.js?478494';

const project = window.project = new ProjectModel({
    transport : {
        load : {
            url : 'data/data.json'
        }
    },
    autoLoad : true,
    validateResponse : true
});

const scheduler = new SchedulerPro({
    appendTo  : 'container',
    minHeight : '10em',
    flex      : '1 1 50%',

    startDate         : new Date(2024, 3, 26),
    endDate           : new Date(2024, 4, 10),
    viewPreset        : 'dayAndWeek',
    eventStyle        : 'plain',
    tickSize          : 70,
    resourceImagePath : '../_shared/images/users/',

    columns : [
        { type : 'resourceInfo', text : 'Name', field : 'name', width : 150 },
        { text : 'City', field : 'city', width : 90 },

        // add new columns as below
        {
          type: 'resourceCalendar',
          text: 'Shift',
          width: 180,
          cellEditor: {                       // class Editor
            inputField: {                    // class calendarField
              hideTrigger: false,
              //  Customize config makes resourceCalendar column can't show calendarEditor
              calendarEditor: {            // class calendarEditor
                activeDate: new Date(),
                defaultWorkingDays : {
                  0 : true,
                  1 : true,
                  2 : true,
                  3 : true,
                  4 : true,
                  5 : true,
                  6 : true
                },
                defaultWorkingDayAvailability: [
                  { startDate : '06:00', endDate : '10:00' },
                  { startDate : '11:00', endDate : '14:00' }
                ],
                listeners: {
                  catchAll: (event) => {
                    console.log(event)
                  }
                }
              },
            },

            listeners: {
              show: (event) => {
                console.log(event)
                console.log(event.source.isVisible)
                console.log(event.source.inputField.calendarEditor)
              },
              beforeClose: (event) => {
                console.log(event)
                console.log(event.source.isVisible)
              },
            },
          }
        },
    ],

    project,

    tbar : [
        {
            ref      : 'zoomInButton',
            icon     : 'b-icon-search-plus',
            text     : 'Zoom in',
            onAction : () => scheduler.zoomIn()
        },
        {
            ref      : 'zoomOutButton',
            icon     : 'b-icon b-icon-search-minus',
            text     : 'Zoom out',
            onAction : () => scheduler.zoomOut()
        }
    ]
});

new Splitter({
    appendTo : 'container'
});

const histogram = window.histogram = new ResourceHistogram({
    project,
    hideHeaders       : true,
    partner           : scheduler,
    appendTo          : 'container',
    rowHeight         : 60,
    minHeight         : '10em',
    flex              : '1 1 50%',
    showBarTip        : true,
    resourceImagePath : '../_shared/images/users/',
    columns           : [
        {
            type           : 'resourceInfo',
            text           : 'Name',
            field          : 'name',
            flex           : 1,
            showEventCount : false,
            width          : 240
        }
    ]
});

new Toolbar({
    appendTo : 'container',
    cls      : 'histogram-toolbar',
    items    : [
        {
            type    : 'checkbox',
            ref     : 'showBarText',
            text    : 'Show bar texts',
            tooltip : 'Check to show resource allocation in the bars',
            checked : false,
            onAction({ source }) {
                histogram.showBarText = source.checked;
            }
        },
        {
            type    : 'checkbox',
            ref     : 'showMaxEffort',
            text    : 'Show max allocation',
            tooltip : 'Check to display max resource allocation line',
            checked : true,
            onAction({ source }) {
                histogram.showMaxEffort = source.checked;
            }
        },
        {
            type    : 'checkbox',
            ref     : 'showBarTip',
            text    : 'Enable bar tooltip',
            tooltip : 'Check to show tooltips when moving mouse over bars',
            checked : true,
            onAction({ source }) {
                histogram.showBarTip = source.checked;
            }
        }
    ]
});

calendar editor can't show as expected but state changed as showed.

[taauntik]

Thanks for the report @NegativeDearc, This is a bug. We'll investigate the issue.

If you need any other help related to our products, you can reach out to us through Bryntum Forum

[arcady-zherdev]

@NegativeDearc A quick workaround is:

const scheduler = new SchedulerPro({
    ...
    columns : [
        {
            type   : 'resourceCalendar',
            text   : 'Shift',
            width  : 180,
            editor : {
                type           : 'calendarfield',
                hideTrigger    : false,
                //  Customize config makes resourceCalendar column can't show calendarEditor
                calendarEditor : {            // class calendarEditor
                    activeDate         : new Date(),
                    defaultWorkingDays : {
                        0 : true,
                        1 : true,
                        2 : true,
                        3 : true,
                        4 : true,
                        5 : true,
                        6 : true
                    },
                    defaultWorkingDayAvailability : [
                        { startDate : '06:00', endDate : '10:00' },
                        { startDate : '11:00', endDate : '14:00' }
                    ],
                    listeners : {
                        catchAll : (event) => {
                            console.log(event);
                        }
                    }
                }
            }
        }
...

[NegativeDearc]

@NegativeDearc A quick workaround is:

const scheduler = new SchedulerPro({
    ...
    columns : [
        {
            type   : 'resourceCalendar',
            text   : 'Shift',
            width  : 180,
            editor : {
                type           : 'calendarfield',
                hideTrigger    : false,
                //  Customize config makes resourceCalendar column can't show calendarEditor
                calendarEditor : {            // class calendarEditor
                    activeDate         : new Date(),
                    defaultWorkingDays : {
                        0 : true,
                        1 : true,
                        2 : true,
                        3 : true,
                        4 : true,
                        5 : true,
                        6 : true
                    },
                    defaultWorkingDayAvailability : [
                        { startDate : '06:00', endDate : '10:00' },
                        { startDate : '11:00', endDate : '14:00' }
                    ],
                    listeners : {
                        catchAll : (event) => {
                            console.log(event);
                        }
                    }
                }
            }
        }
...

Thank you for the reply. @arcady-zherdev

Some config works like defaultWorkingDayAvailability and defaultWorkingDays but some others not working like parentField=false or removeButton=false

[arcady-zherdev]

@NegativeDearc Ok. I've made a separate ticket for that: https://github.com/bryntum/support/issues/9830