Our pure JavaScript Scheduler component

Post by pychen »


We redefined below class to render the outline to red color, but can see the blue border inside, how to disable it?

:host ::ng-deep .b-active {
    outline:  0.5rem solid red;
pic1.png (4.51 KiB) Viewed 96 times

and is it possible to just enable this when do "scheduler.scrollEventIntoView" ?

Post by saki »

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:

 .b-sch-event-wrap:not(.b-milestone-wrap).b-active .b-sch-event {
    outline: 0.3em solid #f44336;
    outline-offset: 3px;

I get the following:

Screen Shot 2021-09-13 at 11.19.51.png
Screen Shot 2021-09-13 at 11.19.51.png (57.75 KiB) Viewed 85 times


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.

Or I miss the point?

Post by pychen »

thanks for reply.

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.

Post by saki »

In that case you probably shouldn't rely on the default CSS class .b-active but you should add your own when you need it. The event that could be used for this purpose is https://bryntum.com/docs/scheduler/#Scheduler/view/Scheduler#event-eventSelectionChange

Then you could use https://bryntum.com/docs/scheduler/#Scheduler/model/EventModel#field-cls field to add remove your custom classes depending on your decision logic.

Post by Animal »

Focused and selected are two separate styles.

The blue outline means focused.

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

Post by pychen »

So far the issue is cannot add/replace style dynamically.

code snippet like
first step get a list of events

this.events = this.scheduler.schedulerInstance.eventStore.query(record =>  {

second step move view of scheduler

 this.scheduler.schedulerInstance.scrollEventIntoView(this.events [this.searchIndex], {highlight: true, focus: true})

third step, after move to new place, add style (here defined own red outline as mentioned before) , but seems it does not work,

 let eventFocused = this.events [this.searchIndex];
 let domcls = new DomClassList("event-border-style-red");
 eventFocused .cls = domcls;

in step 3, the event from list is not a "Scheduler.model.EventModel#cls" object? or used it wrongly?

Post by Animal »

To change the focused rendition, you can just use CSS. The class b-active is put on the element.

Post by Animal »

I got this:

Screenshot 2021-09-15 at 13.36.34.png
Screenshot 2021-09-15 at 13.36.34.png (60.63 KiB) Viewed 45 times

When I added this to the example's SASS

Screenshot 2021-09-15 at 13.36.42.png
Screenshot 2021-09-15 at 13.36.42.png (21.74 KiB) Viewed 45 times

Post by Animal »

If what you want is a temporary highlight effect, then use

highlight : true

That adds the class b-fx-highlight for one second

The default rules add a box shadow.

Maybe try

.b-sch-event-wrap:not(.b-milestone-wrap).b-fx-highlight {
    animation-name : none;
    animation : none;
    outline : 2px solid red;

I can see that one second might not be enough. Here is a FR to make that configurable: https://github.com/bryntum/support/issues/3420

Post by pychen »

thank you Animal.

seems a little different with my requirement, but will try .

no more question for this case.

Post Reply