[ANGULAR] Custom headers for different zoom levels

[sufianh]

Each time I zoom in, whether by clicking on the timeline or using the mouse wheel, the timeline headers change for each zoom level. I would like to use a custom header that displays the hours only regardless of the zoom level. Or maybe set a custom header for a specific zoom level. I have tried using a viewPreset, but it only seemed to work for the default zoom level.

[alex.l]

You can replace all zoom levels as you want. Zoom levels is nothing else than viewPresets that changes when you zooming.
Please see docs with code snippets here https://bryntum.com/products/scheduler/docs/api/Scheduler/preset/ViewPreset
and here https://bryntum.com/products/scheduler/docs/api/Scheduler/preset/PresetManager
and example here https://bryntum.com/products/scheduler/examples/configuration/

[sufianh]

None of these examples provide a clear explanation of how to set a custom timeline header for different zoom levels. Would you please be kind and provide me with an example of how to always show 1 row of header in hour format always. Or set custom headers for different timeline zoom levels. My goal is to constantly show hours in all or most zoom levels.

[tasnim]

Hi,

Is it what you're looking for?

Screenshot 2023-03-30 222658.png (36.86 KiB) Viewed 81 times

This is the code I used to achieve this

const newPresets = PresetManager.map(preset => {
    return {
        id             : preset.id,
        base           : preset.id, // Based on an existing preset
        

    headers : [{
        unit : 'hour',
        dateFormat : 'LT'
    }]
};
});

const scheduler = new Scheduler({
    appendTo         : 'container',
    resources        : resources,
    events           : events,
    // added new presets here
    presets          : newPresets,
    startDate        : new Date(2017, 0, 1, 6),
    endDate          : new Date(2017, 0, 1, 20),
    viewPreset       : 'hourAndDay',
    rowHeight        : 50,
    barMargin        : 5,
    multiEventSelect : true,
    columns          : [
        { text : 'Name', field : 'name', width : 130 }
    ]
});

[sufianh]

Yes, that is exactly what I am looking for. Thank you!

Although the only issue I see with this, is that it's limiting the zoom to a certain level. I am not able to zoom past or beyond some range. Is this an intended behavior or is there a setting that is missing?

[tasnim]

I'm trying to zoom in and out
And seems working fine.

chrome_nw3DHmWWh6.gif (1.44 MiB) Viewed 57 times

Could you please explain a bit further?