The selector which puts the blue outline there is .b-sch-event-wrap:not(.b-milestone-wrap).b-active .b-sch-event so you need to change that.
Also, it is probably simpler to define it at the global level, not as an Angular-scoped style. If I append the following styling to styles.scss of a demo:
Screen Shot 2021-09-13 at 11.19.51.png (57.75 KiB) Viewed 1033 times
Then,
is it possible to just enable this when do "scheduler.scrollEventIntoView"
I'm not sure if I fully get this requirement. The events are outlined when they are clicked (selected) because then they get b-active CSS class which turns on the outline. So if an event is out of view it should not be marked active unless you do it programmatically.
for .b-active, which window-event triggered? How to capture it and replace with another style?
my requirement is when user selected one event, still keep blue border as highlight style, but when do scrollIntoView the focus function would use red highlight instead.
Selection is a separate issue to focus, though normally, it does follow the focused event.
But for multi selection, it is not one to one. You can CTRL/CLICK if multiEventSelect is true, and that will become the focused event and be selected. But the previously selected & focused event will remainselected.
It sound like you just want another focused style, and just need to override the styles for .b-active