Premium support for our pure JavaScript UI components


Post by tomerPlanit »

Hi I use scheduler 5.2.9v with angular 14.
I am trying to change zoom level but in the same time always show specific date in the same offset in the visible date range.

After see the documentation I decided to use "zoomToLevel" method.
I enter the zoom level that I want then enter the date that I want to show(in zoomDate property), and tried to calculate the "zoomPosition" but didn't understand how to calculate this parameter.

Can you explain how to calculate this parameter for achieve the explained functionality?


Post by alex.l »

Hi tomerPlanit,

zoomPosition is an offset at which the passed date should be positioned. So, it is a number in pixels. If you want it centered, you can divide the width of a timeAxis by 2.

But I think easier to use centerDate in that case. For the rest, I can't provide a formula, it depends on result you want to see.

All the best,
Alex


Post by tomerPlanit »

Can you please explain how to get the timeAxis width?

Tried to look in the documentation, but it's not straightforward.

Should I query the DOM? which class?
Or maybe get it via the schedulerInstance?


Post by marcio »

Hey tomerPlanit,

If I understood correctly, you're looking for the timeaxis width, which you can get via schedulerInstance via

scheduler.timeAxisSubGrid.width

https://bryntum.com/products/scheduler/docs/api/Scheduler/view/TimelineBase#property-timeAxisSubGrid
https://bryntum.com/products/scheduler/docs/api/Grid/view/SubGrid#config-width

Best regards,
Márcio


Post by tomerPlanit »

Hi I want to explain again what I am trying to achieve.
When I press on the time line I have the clicked date, from now I want to use the "zoomToLevel" method for make zoom by mouse move.
The change from the original zoom behavior I want the the zoom will be responsive not to the center date but to clicked date.
The difficulty of it is that the time axis width is always changes and the scroller position also goes to the center.

Add some video that show the zoom that I want to get:


Post by tomerPlanit »

I am sorry but can't upload the gif file that show what I am talking about.

Attachments
1.png
1.png (40.56 KiB) Viewed 218 times

Post by alex.l »

Sorry, I can't put all together to see what is the problem here.

When I press on the time line I have the clicked date, from now I want to use the "zoomToLevel" method for make zoom by mouse move.

Not sure I got that "zoom by mouse move". I think GIF might be helpful here. Try to zip your file and attach? Clear cache, re-login. I am not sure why this error might happen, we will check internally if all good with your account.

Before you wrote

I enter the zoom level that I want then enter the date that I want to show(in zoomDate property), and tried to calculate the "zoomPosition" but didn't understand how to calculate this parameter.

and later

The change from the original zoom behavior I want the the zoom will be responsive not to the center date but to clicked date.

So, why can't you pass clicked date in centerDate param in your zoomToLevel call? In that case it will be centered by your desired date.

All the best,
Alex


Post by tomerPlanit »

This video explains what I am trying to achieve:

screen-capture (3).gif
screen-capture (3).gif (2.88 MiB) Viewed 200 times

Post by alex.l »

I am not sure that's fully reachable as you desire right now, but that looks promising, I've opened a feature request to add that functionality: https://github.com/bryntum/support/issues/6145
Did you see https://bryntum.com/products/scheduler/docs/api/Scheduler/view/mixin/TimelineZoomable#config-zoomOnTimeAxisDoubleClick
and https://bryntum.com/products/scheduler/docs/api/Scheduler/feature/Pan functionality?

All the best,
Alex


Post by alex.l »

Hi, Please try to zoom in/out with Ctrl pressed. It should be already working as you need. Please let us know if it works.
Here is a ticket that implemented this behaviour https://github.com/bryntum/support/issues/5036

All the best,
Alex


Post Reply