`weekDateAndMonth` preset looks different when after zoom out and in

[taauntik]

Forum post

Reproducible with any scheduler demo, just assign viewpreset to weekDateAndMonth

---

I noticed that the preset 'weekDateAndMonth' looks different after I zoom out and back in.

Initial load:

Zoom out once:

Zoom back in:

I really like how it looks after zooming out and back in and would like that to be how it looks when initially loaded.

Source:

import { BryntumResourceHistogram } from '@bryntum/gantt-react';
import { useMemo, useRef } from "react";
import "./GanttStyles.scss";
import { ProjectModelConfig } from '@bryntum/schedulerpro';
import { DateHelper } from '@bryntum/gantt';

export default function App() {
    const histogramRef = useRef<BryntumResourceHistogram>(null);
    const { histogramProject } = useMemo(() => getConfigurationData(), []);
    const histogramConfig = {
        viewPreset: 'weekDateAndMonth',
        columns: [
            { type: 'resourceInfo', field: 'name', text: 'Resource', showEventCount: false, width: 250 },
            { type   : 'scale', hidden : true },
        ],
    };
    return (
        <>
            <h1>Bryntum Scheduler Pro Demo</h1>
            <div style={{ flex: 1 }}>
                <BryntumResourceHistogram ref={histogramRef} {...histogramConfig} project={histogramProject} />
            </div>
        </>
    );
}

function getConfigurationData() {
    const resourceProject = {
        calendar: 'general',
        autoSetConstraints : true,
        autoLoad: true,
        validateResponse: true,
    };
    const histogramProject = Object.assign({}, resourceProject, {
        transport: {
            load: {
                url: '/resource-gantt.json',
            },
        },
        maxCalendarRange: DateHelper.asMilliseconds(10, 'years'),
        calendar: 'general',
        calendars: [
            {
                id: "general",
                name: "General"
            }
        ],
        onBeforeResponseApply: () => { },
    } satisfies ProjectModelConfig);
    return { histogramProject };
}