TaskNonWorkingTime doesn't respect fillTicks

[taauntik]

• [x] Test both modes ('bar' and non-bar)

Forum post

The 'taskNonWorkingTime' feature seems to conflict with the 'fillTicks' feature. In the example provided, the view preset has been changed to 'weekAndDayLetter' with 'fillTicks' enabled. We notice that the nonWorkingTime segment is not confined within the day boundaries.

steps to reproduce: modify the above code snippet: 'viewPreset: weekAndDayLetter', Add a 'fillTicks: true' to the gantt config.

Here is the code you could use to reproduce in here https://bryntum.com/products/gantt/examples/calendars/

import { Gantt, DateHelper, Toast, ProjectModel, PresetManager } from '../../build/gantt.module.js?474872';
import shared from '../_shared/shared.module.js?474872';

const project = new ProjectModel({
    startDate : new Date(2024, 6, 1),
    calendar: 'general',
    tasks : [
        {
            id       : 1,
            name     : 'Write docs',
            expanded : true,
            children : [
                { id : 2, name : 'Proof-read docs', startDate : '2024-07-02', endDate : '2024-07-15' },
                { id : 3, name : 'Release docs', startDate : '2024-07-16', endDate : '2024-07-22' }
            ]
        }
    ],

    dependencies : [
        { fromEvent : 2, toEvent : 3 }
    ],
    calendars : [
        {
            "id": 'general',
            "name": "5 Day Work Week w/ Holidays",
            "project_id": null,
            "intervals": [
                {   
                    "name": "Lunch Break",
                    "recurrentStartDate": "on Mon, Tue, Wed, Thu, Fri at 12:00",
                    "recurrentEndDate": "on Mon, Tue, Wed, Thu, Fri at 13:00",
                    "isWorking": false
                },

                {
                    "name": "Off Hours",
                    "recurrentStartDate": "on Mon, Tue, Wed, Thu, Fri at 17:00",
                    "recurrentEndDate": "on Mon, Tue, Wed, Thu, Fri at 08:00",
                    "isWorking": false
                },
                
                {
                    "name": "Independence Day",
                    "startDate": "2024-07-04",
                    "endDate": "2024-07-05",
                    "isWorking": false
                },
            ]
        },
    ]
});

const gantt = new Gantt({
    appendTo : 'container',
    project,
    fillTicks: true,
    tickSize : 50,
    viewPreset: 'weekAndDayLetter',
    columns : [
        { type : 'name', width : 250 },
        { type : 'calendar', width : 200 }
    ],

    features : {
        taskNonWorkingTime : {
            tooltipTemplate({ name, startDate, endDate, iconCls }) {
                return `                   
                    <p class="b-nonworkingtime-tip-title">${iconCls ? `<i class="${iconCls}"></i>` : ''}${name || 'Non-working time'}</p>
                    ${DateHelper.format(startDate, 'L')} - ${DateHelper.format(endDate, 'L')}
                `;
            },
            mode : 'bar'
        },
        percentBar : false
    },

    tbar : [
        {
            text       : 'Highlight project non-working time',
            toggleable : true,
            pressed    : false,
            onToggle({ pressed }) {
                gantt.features.nonWorkingTime.disabled = !pressed;
            }
        },
        {
            text       : 'Highlight task non-working time',
            pressed    : true,
            toggleable : true,
            onToggle({ pressed }) {
                gantt.features.taskNonWorkingTime.disabled = !pressed;
                gantt.widgetMap.custom.disabled            = !pressed;
                gantt.widgetMap.mode.disabled              = !pressed;
            }
        },
        {
            ref        : 'mode',
            type       : 'combo',
            label      : 'Display mode',
            value      : 'row',
            inputWidth : '5em',
            editable   : false,
            items      : [
                ['row', 'Row'],
                ['bar', 'Bar'],
                ['both', 'Both']
            ],
            onChange({ value }) {
                gantt.features.taskNonWorkingTime.mode = value;
            }
        },
        {
            ref        : 'custom',
            text       : 'Custom styling',
            toggleable : true,
            onToggle() {
                gantt.element.classList.toggle('b-custom-nonworkingtime');
            }
        }
    ],
    listeners : {
        nonWorkingTimeClick       : 'onNonWorkingTimeElementInteraction',
        nonWorkingTimeContextMenu : 'onNonWorkingTimeElementInteraction',
        nonWorkingTimeDoubleClick : 'onNonWorkingTimeElementInteraction'
    },

    onNonWorkingTimeElementInteraction({ type, name, startDate, endDate, domEvent }) {
        const action = domEvent.type === 'contextmenu' ? 'rightclick' : domEvent.type;
        Toast.show(`You ${action}ed ${name || 'a non working range'}, starting: ${DateHelper.format(startDate, 'll')}`);
    }
});


PresetManager.registerPreset('hourAndDayFull', {
    name: 'hourAndDayFull',
    base: 'hourAndDay-64by40',
    timeResolution: {
        increment: 1,
        unit: "hour"
    },
    tickWidth: 64,
    headers: [
        {
            increment: 1, 
            unit: 'day', 
            dateFormat: 'ddd MM/DD/YYYY'
        },
        {
            increment: 6, 
            unit: 'hour', 
            dateFormat: 'LST'
        }
    ]
});


PresetManager.registerPreset('weekAndDayLetter', {
    name: 'weekAndDayLetter',
    base: 'weekAndDayLetter',
    timeResolution: {
        unit: 'day',
        increment: 1
    },
    tickWidth: 20,
    headers: [
        {
        dateFormat: "ddd, DD MMM YYYY",
        increment: 1,
        unit: "week"
        },
        {
            dateFormat: "d1",
            increment: 1,
            unit: "day"
        }
    ]
});

[mazzafabio]

Same issue found here https://github.com/bryntum/support/issues/8943