Our pure JavaScript Scheduler component


Post by mtubisz »

Hi !

I updated my scheduler to version 3.0.0 and even now to 3.0.1 to fix my bug "timeaxis dissapears on event select" viewtopic.php?f=44&t=13107.

But now in these versions I can't filter, sort, group and use my custom filters on RESOURCES. When i click sorting, grouping just nothing happens.

Do you know about this issue ?

Thanks,
mtubisz

Post by saki »

Can you reproduce it in one of our examples?

I'm trying this one and I cannot reproduce it there.

Give us please steps to reproduce or a runnable showcase.

Post by mtubisz »

I figured out that something is wrong is with prop "zoomLevel". In your example I use build component (not shared). When I add this prop in yours example I can't see resources and events:
<BryntumScheduler 
	zoomLevel={15}
/>
In my scheduler when I add this prop I can't filter, group and use my custom filters on resources.

Post by mtubisz »

Is this information is enought for you to check this ?
Thanks in advance ! :)

Post by saki »

There are two aspects of the problem.

First one is that zoomLevel is documented as property so it should not be used as a config option. However, you should be warned when something like that happens therefore I've created ticket: https://github.com/bryntum/support/issues/239

Another aspect is that zoomLevel is probably not an optimal approach to what you want to achieve. zoomLevel is just a viewPreset registered in the PresetStore, see the docs please.

Tell us please what you want to achieve, perhaps there is a solution better than zoomLevel.

Post by mtubisz »

In my scheduler I set startDate and endDate in scale : 'daily', 'weekly', 'monthly'. I set this by changing state of startDate and endDate according to chosen scale.
  let change = { ...this.state }
  switch (scale) {
    case 'daily': {
      change.endDate = moment(change.startDate).add(1, 'd').toDate()
      change.scale = 'daily'
      break
    }
    case 'weekly': {
      change.startDate = moment(change.startDate).startOf('isoWeek').startOf('day').toDate()
      change.endDate = moment(change.startDate).endOf('isoWeek').endOf('day').toDate()
      change.scale = 'weekly'
      break
    }
    case 'monthly': {
      change.startDate = moment(change.startDate).startOf('month').startOf('day').toDate()
      change.endDate = moment(change.startDate).endOf('month').endOf('day').toDate()
      change.scale = 'monthly'
      break
    }
  }
  this.setState(change)
And now I would like to zoom my scheduler, but I want to keep my value of startDate and endDate. I set minZoomLevel and maxZoomLevel.
<BryntumScheduler 
minZoomLevel={12}
maxZoomLevel={18}
/>
I use now zoomIn/Out by reference to scheduler (now i can filter, group, sort resources), but this way doesn't keep my values of startDate and endDate. I need solution to keep startDate and endDate despite zooming.
zoomInFunc () {
  this.bryntum.current.schedulerEngine.zoomIn()
  this.setState(prevState => ({
    zoomLevel: prevState.zoomLevel + 1
  }))
}
zoomOutFunc () {
  this.bryntum.current.schedulerEngine.zoomOut()
  this.setState(prevState => ({
    zoomLevel: prevState.zoomLevel - 1
  }))
}
Thanks for your time Saki

Post by saki »

I need solution to keep startDate and endDate despite zooming.
This sounds to me as very limited, nearly impossible task. Zoom was originally meant to see more or less time on the time axis what means that startDate and endDate must change.

Changing the timeResolution of the viewPreset or to change the active viewPreset completely could work for you.

Post by mtubisz »

Thanks saki for your answer.

I'm a little bit confused. So why I can't just use https://bryntum.com/docs/scheduler/#Scheduler/view/mixin/TimelineZoomable#config-zoomKeepsOriginalTimespan property and set to true. In this way my timespan should keeps same values despite zooming.

This property worked in previous versions. Now without this property every zooming changes my startDate and endDate but when I set this property to true it works in most of cases and keeps my startDate and endDate but NOT IN EVERY ZOOM IN OR ZOOMOUT so this property doesn't work properly now (as I said that worked in previous versions).

Post by mtubisz »

Is there anything new about this case ? Still have the same problem.

Thanks in advance :)

Post by saki »

https://bryntum.com/docs/scheduler/#Scheduler/view/mixin/TimelineZoomable#config-zoomKeepsOriginalTimespan does its best within some limits. To see the the behavior put the following code in Scheduler/examples/basic/app.js replacing the scheduler variable.
let scheduler = new Scheduler({
    adopt            : 'container',
    minHeight        : '20em',
    resources        : resources,
    events           : events,
    startDate        : new Date(2016, 11, 31, 6),
    endDate          : new Date(2017, 0, 2, 20),
    viewPreset       : 'hourAndDay',
    rowHeight        : 50,
    barMargin        : 5,
    multiEventSelect : true,

    zoomKeepsOriginalTimespan : true,

    columns : [
        { text : 'Name', field : 'name', width : 130 }
    ]
});
and then please run the example. It scrolls within it original start and end dates initially. As you zoom in the original timespan is kept and you scroll left and right more and more with increasing zoom level.

As you zoom out, the timespan is kept for two steps and then it is increased to satisfy the zoom level (in fact the next view preset used).

Therefore if you want to pin your time span on the screen (left and right), your zoom range is very limited (that is what I meant originally). With scrolling, the range can be kept while zooming in and kept some steps while zooming out.

Whatever behavior you want to achieve, keep in mind that zooming is actually changing the view presets from preset store according to zoom level.

Post Reply