[ANGULAR] Need to show add arrow on click

[alex.l]

https://bryntum.com/products/schedulerpro/docs/api/Scheduler/view/mixin/TimelineScroll#function-scrollToDate is async.
Try to await before continue your code?

[Animal]

That code just won't work if you look at the docs for the APIs you use.

https://bryntum.com/products/calendar/docs/api/Scheduler/view/mixin/TimelineDateMapper#function-getCoordinateFromDate

Just returns the offset along the time axis. So that will be just an X position

https://bryntum.com/products/calendar/docs/api/Core/widget/Widget#function-showBy

Screenshot 2024-08-09 at 15.39.11.png (221.68 KiB) Viewed 812 times

Can you experiment with that? You might have to set a breakpoint in your code and check what it is doing.

[swathi]

Tried using showByPoint which accepts X position.

this.schedulerPro.scrollToDate('someDate', { block: 'start' });
let a = this.schedulerPro.getCoordinateFromDate('someDate');
this.icon.cls = "arrow-cls";
this.icon.showByPoint(a);

[tasnim]

Hi,

ShowByPoint won't work for widget. Please use this way

let a = this.schedulerPro.getCoordinateFromDate('someDate');
this.icon.showBy({ target : props.eventElement, offset : [a] });

[swathi]

Basically, I am not using on any Bryntum event, instead I receive date and resource ID from the API response, then I need to show the icon at that particular date and resource.
Hence, I can't make use of props.eventElement.

this.getInsertionPoint().subscribe( res => {
      if (res.length > 0) {
        this.schedulerPro.scrollToDate(new Date(res[0].insertionPointDateTime), { block: 'start' });
        let a = this.schedulerPro.getCoordinateFromDate(res[0].insertionPointDateTime);
        this.icon.cls = "arrow-cls";
        this.icon.showBy({ target : props.eventElement, offset : [a] }); //this props can't be used
      }
    })

[tasnim]

Hi,

Then you can try something like this

    const xy = scheduler.getCoordinateFromDate(props.date);
    icon.hidden = false;
    icon.x = xy;

Please let us know if that works for you.

Best of luck ,
Tasnim

[swathi]

It's not working

[tasnim]

Hi,

Could you please share a runnable test case so we can check the code and give you a proper solution?

[swathi]

Hi,

Please find the attached demo code.

I have added showArrow button at the top, on clicking on the button, it should scroll to the date and to the particular resource which is specified in the showArrow().

Thanks,
Swathi

[tasnim]

Hi,

I've updated your demo and it's now working. All it needed is that a higher z-index and needed to use the getCoordinate method like this

this.schedulerPro.getCoordinateFromDate(date, false);

Please find the updated demo attached

share.zip

(15.05 KiB) Downloaded 47 times

Best regards,
Tasnim