Zooming and using a custom PresetManager preset

[peterjc]

Hi,

I am testing the scheduler in an Ionic application (attached).

To make then best use of screen on a smaller tablet, I have set up a custom preset to show just the hours in a day....

 this.viewPreset = 'dayOnly';
    let existing = PresetManager.getPreset(this.viewPreset);
    if (!existing) {
      PresetManager.registerPreset(this.viewPreset, {
        tickWidth: 35,
        rowHeight: 10,
        displayDateFormat: 'HH:mm',
        shiftIncrement: 1,
        shiftUnit: 'day',
        timeResolution: {
          unit: 'hour',
          increment: 0.08
        },
        defaultSpan: 24,
        headerConfig: {

          middle: {
            unit: 'hour',
            increment: 1,
            dateFormat: 'H',
            // renderer(startDate, endDate, headerConfig, cellIdx) {

            //   // custom css eg padding, margin and font size
            //   //headerConfig.headerCellCls = 'headerCustom';
            //   return "LL";
            // }
          },
        }
      });

And this is what I get...

screenshot24.png (35.98 KiB) Viewed 1497 times

I have a slider than calls the following code...

public timeZoomChange(event: CustomEvent): void {
    try {
      if (!this.dataLoaded)
        return;

      let val = event.detail.value;
      this.scheduler.zoomLevel = val;  
    } catch (error) {
      console.error(error);
      this.presentToast(`timeZoomChange: ${error}`);
    }    
  }
  

When I zoom using this, the view zooms as expected, but I now get 2 rows shown on the timescale instead of just the one...

screenshot25.png (39.86 KiB) Viewed 1497 times

I haven't got my zooming quite right yet, but is there a way to stop this extra row on the timescale appearing, regardless of the zoom?

Thanks in advance for any help

[saki]

Did you attach the correct zip? I don't get one-row header row and the slider:

Screen Shot 2019-09-20 at 12.07.27.png (220.09 KiB) Viewed 1493 times

[saki]

What is happening behind the scenes is that while zooming the scheduler scans through default presets and selects the on which suits best. All default presets have 2 rows, see PresetManager.

To achieve what you want you can redefine the default presets or you can use a simple css to hide one row of the header.

[peterjc]

Hi, thanks for that.

I have reattached the project (I must have mixed up the various zips I have of it).

From your information above, and by a little trial and error, I "think" I have what I need.

So, now, I have made a guess at which default presets the scheduler is selecting, and just registered (I assume this is what we do to redefine?). Eg

 this.viewPreset = 'hourAndDay';
    //let existing = PresetManager.getPreset(this.viewPreset);
   // if (!existing) {
      PresetManager.registerPreset(this.viewPreset, {
        tickWidth: 35,
        rowHeight: 10,
        displayDateFormat: 'HH:mm',
        shiftIncrement: 1,
        shiftUnit: 'day',
        timeResolution: {
          unit: 'hour',
          increment: 0.08
        },
        defaultSpan: 24,
        headerConfig: {

          middle: {
            unit: 'hour',
            increment: 1,
            dateFormat: 'H',
            
          },
        }
      });
    
    PresetManager.registerPreset('minuteAndHour', {
      tickWidth: 120,
      rowHeight: 10,
      displayDateFormat: 'HH:mm',
      shiftIncrement: 1,
      shiftUnit: 'day',
      timeResolution: {
        unit: 'hour',
        increment: 0.08
      },
      defaultSpan: 24,
      headerConfig: {

        middle: {
          unit: 'minute',
          increment: 15,
          dateFormat: 'HH:mm',          
        },
      }
    });

I then have a slider which moves between 14 and 16, snapping at 1, so it gives 3 values, ie 14, 15, 16.

In the handler, I have...

public timeZoomChange(event: CustomEvent): void {
    try {
      if (!this.dataLoaded)
        return;

      let val = event.detail.value;
      this.scheduler.zoomLevel = val;  
      console.info(`Previous zoom: ${this.scheduler.zoomLevel}, new zoom: ${val}`);
       if (val >= 16)
         this.scheduler.viewPreset = 'minuteAndHour';
      
    } catch (error) {
      console.error(error);
      this.presentToast(`timeZoomChange: ${error}`);
    }    
  }
  

So, I set the zoom on scheduler vie the this.scheduler.zoomLevel = val; , and the if the value is 16, I "force" the preset to minuteAndHour...

 if (val >= 16)
         this.scheduler.viewPreset = 'minuteAndHour';

This seems to do what I was after. A couple of times I ran it I did get an error about invalid time range (perhaps this is before I in the timeZoomChange, but then when I open the dev tools of the browser to look, the zooming then seems to be ok.

The error was...

screenshot26.png (9.76 KiB) Viewed 1483 times

Does what have done above look like the correct way?

Thanks in advance for any further help

[saki]

Well, it's a bit brute force but if it works for you it's acceptable.
However, the neater solution would be to redefine those default viewPresets that you plan to use and to delete others.

See:
https://bryntum.com/docs/scheduler/#Scheduler/preset/PresetManager#function-registerPreset-static
https://bryntum.com/docs/scheduler/#Scheduler/preset/PresetManager#function-deletePreset-static

[peterjc]

Oh ok, so you mean don't do the

if (val >= 16)
         this.scheduler.viewPreset = 'minuteAndHour';""

but just define the presets, and allow the scheduler to select the appropriate?

[saki]

Exactly.