Premium support for our pure JavaScript UI components


Post by Luffy »

Preset's start and end dates are not in the range(not visible) when zoom in or zoom out
let scheduler = new Scheduler({
  appendTo: 'container',
  minHeight: '20em',
  resources: resources,
  events: events,
  startDate: new Date(2017, 0, 1, 6),
  endDate: new Date(2017, 1, 1, 6),
  viewPreset: 'weekAndDay',
  rowHeight: 50,
  barMargin: 5,
  multiEventSelect: true,

  columns: [{ text: 'Name', field: 'name', width: 130 }],
  zoomLevels: [
    {
      width: 50,
      increment: 4,
      resolution: 60,
      preset: 'hourAndDay',
      resolutionUnit: 'minute'
    },
    {
      width: 60,
      increment: 3,
      resolution: 60,
      preset: 'hourAndDay',
      resolutionUnit: 'minute'
    },
    {
      width: 80,
      increment: 2,
      resolution: 30,
      preset: 'hourAndDay',
      resolutionUnit: 'minute'
    },
    {
      width: 100,
      increment: 1,
      resolution: 15,
      preset: 'hourAndDay',
      resolutionUnit: 'minute'
    }
  ]
});
This is the basic application picked by your bryntum scheduler samples

Here I need to keep the scheduler start(2017, 0, 1, 6) and end(2017, 1, 1, 6) dates while I'm zooming in or out with a given preset, but it is not possible do in this example, start and end date will disappear from the scheduler while zooming,

Is there a way to apply the preset time ranges for its zoom levels too or how does that handle?

Thanks

Post by Luffy »

Any update on this please?

Post by sergey.maltsev »

Hi!

Did you try to set other viewPreset for scheduler ?
let scheduler = new Scheduler({
...
viewPreset: 'hourAndDay',

Post by Luffy »

Hi Sergey,

Thanks, I use 'zoomToLevel' and its working now,

If I need to apply a different zoom levels array and set a default selected index for that(zoomTo index) for each preset, how can I make it work?

setting a new zoom level array does not work at the moment. It just set an array and still rendering the initial config zoom levels in the scheduler
config.zoomLevels = newZoomLevels; 
getSchedulerInstance().zoomTo(zoomIndex); // not zooming to the index I provided
Assume I need to zoomTo first index of the newZoomLevels after I apply config.zoomLevels = newZoomLevels;

Any suggestions?

Post by sergey.maltsev »

Hi!

I see you are trying to set config.zoomLevels but not getSchedulerInstance().zoomLevels.
This might be the reason because updating the config won't have any affect on already created scheduler instance.

Try this
getSchedulerInstance().zoomLevels = newZoomLevels; 
getSchedulerInstance().zoomTo(zoomIndex);

Post by Luffy »

That is not the reason
getSchedulerInstance().zoomLevels = newZoomLevels; 
getSchedulerInstance().zoomTo(zoomIndex);
Tried this, no luck and the same behaviour, but in the console I can see the new array from getSchedulerInstance().zoomLevels. but it zooms to the initial config array

Post by sergey.maltsev »

Hi!

Could you please attach your fully working app code here to check.

Post by Luffy »

Hi Sergev,

Tried this with your basic example, it doesn't work either
let scheduler = new Scheduler({
  appendTo: 'container',
  minHeight: '20em',
  resources: resources,
  events: events,
  startDate: new Date(2019, 8, 1, 6),
  endDate: new Date(2019, 11, 1, 6),
  viewPreset: 'weekAndDay',
  rowHeight: 50,
  barMargin: 5,
  multiEventSelect: true,

  columns: [{ text: 'Name', field: 'name', width: 130 }],
  zoomLevels: [
    {
      name: 'YEAR',
      preset: 'manyYears',
      width: 50,
      increment: 1,
      resolution: 1,
      resolutionUnit: 'YEAR'
    }
  ],
  listeners: {
    zoomChange({ level }) {
      console.log(level, scheduler.zoomLevel);
    }
  }
});

const zoomlevels2 = [
  {
    preset: 'hourAndDay',
    width: 50,
    increment: 1,
    resolution: 1,
    resolutionUnit: 'HOUR'
  },
  {
    preset: 'hourAndDay',
    width: 100,
    increment: 1,
    resolution: 1,
    resolutionUnit: 'MINUTE'
  }
];

scheduler.zoomLevels = zoomlevels2;
scheduler.zoomTo(1);
I have added a listener to see the current zoom levels, it just only prints the 0, how can I zoom to newly created zoom levels?

Post by sergey.maltsev »

Hi, Luffy!

Try to set different resolution so it will vary from current applied one.

Check this sample code
const newZoomLevels = [
    { width: 50,  increment: 4, resolution: 60, preset: 'hourAndDay', resolutionUnit: 'minute' },
    { width: 60,  increment: 3, resolution: 60, preset: 'hourAndDay', resolutionUnit: 'minute' },
    { width: 80,  increment: 2, resolution: 30, preset: 'hourAndDay', resolutionUnit: 'minute' },
    { width: 100, increment: 1, resolution: 15, preset: 'hourAndDay', resolutionUnit: 'minute' }	
];

scheduler.zoomLevels = newZoomLevels;
scheduler.zoomToLevel(2);
More info on zoomLevels could be found here
https://www.bryntum.com/docs/scheduler/#Scheduler/view/mixin/TimelineZoomable#config-zoomLevels


Also you could try latest scheduler nightly build from customer zone.

Post Reply