[ANGULAR] Need to show add arrow on click

[swathi]

Hi,

I want to show arrow on click of the button at specific location with the date and time specified (refer below screenshot)

Thanks,
Swathi

[tasnim]

Hi,

You can create a widget for the arrow icon

const widget = new Widget({
    appendTo : 'container',
    style    : 'position:absolute; font-size: 5rem',
    hidden   : true,
    positioned : true,
    html     : '<i class="b-fa-solid b-fa-arrow-down"></i>'
});

Then you can listen for the event click to show the widget

scheduler.on('eventClick', (props) => {
    widget.showBy({ target : props.eventElement, align : 't0-b0' });
});

To show it in the correct place you'd need to play with the alignspec https://bryntum.com/products/scheduler/docs/api/Core/widget/Widget#function-showBy
https://bryntum.com/products/scheduler/docs/api/Core/widget/Widget#typedef-AlignSpec

Best regards,
Tasnim

[swathi]

Can you please share one example in angular ?

[tasnim]

Sure, Please download the attached angular app. You can run it with npm i & npm start

msedge_smDc489S4B.gif (612.4 KiB) Viewed 441 times

Best regards,
Tasnim

[swathi]

Hi Tasnim,

Thanks for the demo.
Not getting the arrow on the event click. I am following the steps what you added in the above demo. Still not working.
Not sure where I am going wrong. Can you please help me in resolving this?
Also, I need to show at some specific date, not at any event.

I am not able to attach the zip file. Hence adding the code.

app.component.ts


@Component({
    selector      : 'app-root',
    templateUrl   : './app.component.html',
    styleUrls     : ['./app.component.scss'],
    encapsulation : ViewEncapsulation.None
})
export class AppComponent implements AfterViewInit {
    @ViewChild(BryntumSchedulerProComponent) schedulerProComponent!: BryntumSchedulerProComponent;
    @ViewChild(BryntumSchedulerProProjectModelComponent) schedulerProProjectComponent!: BryntumSchedulerProProjectModelComponent;

private schedulerPro!: SchedulerPro;
private project!: ProjectModel;
private icon!: Widget;

schedulerProProps = schedulerProProps;
projectProps      = projectProps;
html          = '<i>&darr;</i>';
@ViewChild(BryntumWidgetComponent, { static : true }) widgetComponent!: BryntumWidgetComponent;

ngAfterViewInit(): void {
    // SchedulerPro and Project instance
    this.schedulerPro = this.schedulerProComponent.instance;
    this.project = this.schedulerProProjectComponent.instance;
    this.icon = this.widgetComponent.instance;
    this.schedulerPro.zoomToLevel(7);
    this.schedulerPro.on('eventClick', (props: any) => {
        this.icon.showBy({ target : props.eventElement, align : 't0-b0' });
    });
}
}

app.component.html

<bryntum-widget
    #widget
    [positioned] = "true"
    [html]       = "html"
    [hidden]     = "true"
    [style]      = "'font-size:5rem; z-index: 9999'"
/>
<bryntum-scheduler-pro-project-model
    #project
    [resourceModelClass]="projectProps.resourceModelClass!"
    [events]="projectProps.events!"
    [resources]="projectProps.resources!"
    [assignments]="projectProps.assignments!"
    [dependencies]="projectProps.dependencies!">
</bryntum-scheduler-pro-project-model>
<bryntum-scheduler-pro
    #schedulerPro
    [preserveScrollOnDatasetChange] = true
    [project]="project!"
    [startDate]="schedulerProProps.startDate!"
    [endDate]="schedulerProProps.endDate!"
    [viewPreset]="schedulerProProps.viewPreset!"
    [forceFit]="schedulerProProps.forceFit!"
    [columns]="schedulerProProps.columns!"
    [resources]="schedulerProProps.resources!"
    [events]="schedulerProProps.events!"
    (onScheduleContextMenu)="onScheduleContextMenuClick($event)"
    [assignments]="schedulerProProps.assignments!"
    [dependencies]="schedulerProProps.dependencies!">
</bryntum-scheduler-pro>

Thanks,
Swathi

[tasnim]

Hi,

The code looks correct to me. we'd need to debug your app to know what's the issue and the solution! If you're not comfortable sharing your app here in forum, you can share it privately with us at support@bryntum.com

Best of luck ,
Tasnim

[swathi]

Hi,

I was facing problem with attaching the folder.
Please find the attached folder.

Thanks,
Swathi

[swathi]

Hi,

Problem is with the style.
I added class while showing the icon. Then started showing.

    this.icon.cls = "arrow-cls"

Thanks,
Swathi

[tasnim]

Hi,

Please try adding the styles here in app.component.ts

html          = '<i style="z-index:999;font-size:5rem;">&darr;</i>';

And use this align config inside icon.showBy

align : 'b0-l0'

This should resolve the issue.

Best regards,
Tasnim

[swathi]

I am trying to show the icon at some date which is not the current page.
Using the following code.

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

But doesn't work.