Premium support for our pure JavaScript UI components

Post by peterjc »

Hi, until now I have only been displaying around 24 hours of data, so I define my own single view preset...

 this.viewPreset = 'hourAndDay';
      PresetManager.registerPreset(this.viewPreset, {
        tickWidth: 50,
        rowHeight: 10,
        displayDateFormat: this.runtimeStatusService.getCacheShortTimePattern(),
        shiftIncrement: 1,
        shiftUnit: 'day',
        timeResolution: {
          unit: 'hour',
          increment: 0.08

    defaultSpan: 24,
    headers: [{
      unit: 'hour',
      dateFormat: this.runtimeStatusService.getCacheShortTimePattern(),


<bryntum-scheduler #scheduler 

I now want to look at zooming as about to load a longer period of time.

As an experiment, I removed my viewPreset (so it would fall back to the deault), and tried using the zoomLevel ( but it did not seem to do anything.

However, I noticed there was header context menu that has a zoom on it..

2023-01-24_16-00-30.png (16.64 KiB) Viewed 127 times

This seems to do what I am after, however I would like to do the same thing from my own (always visible) slider as opposed to this right click menu.

Is there a way to do this?

Thanks in advance?

Post by tasnim »

Yes. Sure

You could add a slider to the tbar

Here is the output

chrome_4xDeXe3pSv.gif (3.27 MiB) Viewed 120 times

And Here is the code that I used to achieve that

    type : 'slider',
    min : scheduler.minZoomLevel,
    max : scheduler.maxZoomLevel,
    value : scheduler.zoomLevel,
    text : 'Zoom Level',
    listeners : {
        input({ value }) {
            scheduler.zoomLevel = value;

Please also check these docs link

Best of luck,

Post by peterjc »

Thanks for that. I can see you are setting the zoomLevel.

It seems that it does not pick up an initial vlaue for zoomLevel.

Eg I just had

// Component...
 public zoomLevel = 17;
 // HMTL
 <bryntum-scheduler #scheduler 

but it did not load the time bar as per zoom 17.

If I then set the zoomLevel via a slider (later on) it would then be applied.

IS there a way to set the default view via zoomLevel (like I could by using the presetName).

Eg if I use


where viewPreset is set to the name, it DOES load the proper time bar.
Also it appears we can't use viewPreset and zoomLevel together, ie if I have viewPreset set, then changing zoomLevel does not seem to do anything - does this sound correct?

Thanks in advance

Post by tasnim »

zoomLevel is a property (property is changeable when the scheduler instance is created), That's why it's not taking action when you're setting an initial config but it's working when you change it with the slider.

So you cannot set a default view via ZoomLevel but you could use viewPreset instead

Opened a feature request to make it a config so it's possible to set it initially. Here it is

Best of luck,

Post by peterjc »

Hi Tasnim, ok great thanks for that info. I can work with using the viewPreset.

Post Reply