[REACT] Maintain to date of today when zoom in on timeaxis.

[coderboy@12]

Hello,

Please find below video, we've feature for on right click timeaxis header menu we have slider and in that we are just changing preset from 24 hours to 12 hours, 6 hours and 3 hours and then 1 hours, but if you see I need to use horizontal scroll everytime to reach today date. So Is there any way to maintain on today date when I use to change that preset.

Please anyone would help me in this.

[saki]

Calling https://bryntum.com/products/scheduler/docs/api/Scheduler/view/mixin/TimelineZoomable#function-zoomTo should preserve the center date.

Otherwise you can listen to https://bryntum.com/products/scheduler/docs/api/Scheduler/view/mixin/TimelineViewPresets#event-presetChange and call https://bryntum.com/products/scheduler/docs/api/Scheduler/view/mixin/TimelineScroll#function-scrollToDate in the listener.

[kronaemmanuel]

I tried it in our demo: https://bryntum.com/products/scheduler/examples/infinite-scroll/ and as you can see, the timeline keeps the same start datetime in view when zooming. Could you please provide the config that you're using? or a runnable test case?

[coderboy@12]

Sorry It was mistake for explaining what I want, how I get date of where I right click on timeaxisheader?

it's when I right click on 27th date and zoom in then It should focus on 27th.
do we have that feature?

[saki]

Not out-of-the-box, however, it should be easy to implement. You would add Zoom In menu item and in its handler you would both zoomed-in and scrolled to the desired date.

[coderboy@12]

Hi Saki, If you can please explain it by any example would be easy for me.

[alex.l]

Hi,

Here is a full guide with video course about context menu customizations https://bryntum.com/products/scheduler/docs/guide/Scheduler/customization/contextmenu
Here is a method you can use with date in params https://bryntum.com/products/scheduler/docs/api/Scheduler/view/mixin/TimelineZoomable#function-zoomTo

[coderboy@12]

Ok I get that but how would I come to know that on which date column I right click on?

[tasnim]

Hi,

You could listen for https://bryntum.com/products/gantt/docs/api/Scheduler/feature/TimeAxisHeaderMenu#event-timeAxisHeaderMenuShow event
Get the dom event from it and use https://bryntum.com/products/gantt/docs/api/Scheduler/view/mixin/TimelineDateMapper#function-getDateFromDomEvent to retrieve the date from the dom event

    listeners : {
        timeAxisHeaderMenuShow(props) {
            const { source, event } = props;
            const date = source.getDateFromDomEvent(event);
            console.log(date);
        }
    }

Best regards,
Tasnim