Bryntum Support Forums

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(),
    }]
  });

HTML

<bryntum-scheduler #scheduler 
    ...
    [viewPreset]="viewPreset"
    ...
    

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 (https://bryntum.com/products/scheduler/docs/api/Scheduler/view/mixin/TimelineZoomable#property-zoomLevel) but it did not seem to do anything.

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

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?

Yes. Sure

You could add a slider to the tbar
https://bryntum.com/products/scheduler/docs/api/Core/widget/Slider

Here is the output

And Here is the code that I used to achieve that

scheduler.tbar.add({
    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
https://bryntum.com/products/scheduler/docs/api/Scheduler/view/Scheduler#property-zoomLevel
https://bryntum.com/products/scheduler/docs/api/Scheduler/view/Scheduler#property-maxZoomLevel
https://bryntum.com/products/scheduler/docs/api/Scheduler/view/Scheduler#property-minZoomLevel

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 
    [zoomLevel]="zoomLevel"
    [eventStore]="schedulerConfig.eventStore"  

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

// HMTL
[viewPreset]="viewPreset"

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

Hello,
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 https://bryntum.com/products/scheduler/docs/api/Scheduler/view/Scheduler#config-viewPreset

Opened a feature request to make it a config so it's possible to set it initially. Here it is https://github.com/bryntum/support/issues/6044

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