Our pure JavaScript Scheduler component

Post by 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.

Post by 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/

All the best,

Post by 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.

Post by tasnim »


Is it what you're looking for?

Screenshot 2023-03-30 222658.png
Screenshot 2023-03-30 222658.png (36.86 KiB) Viewed 349 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 } ] });

Post by 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?

Post by tasnim »

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

chrome_nw3DHmWWh6.gif (1.44 MiB) Viewed 325 times

Could you please explain a bit further?

Post Reply