Premium support for our pure JavaScript UI components


Post by gorakh.nath »

Hi team,
I have to change the color and Icon of buffer time of the event based on the each event object array.
How can I change this dynamically based on the event object?

Attachments
Screenshot 2023-02-08 at 10.02.27 PM.png
Screenshot 2023-02-08 at 10.02.27 PM.png (190.47 KiB) Viewed 265 times

Post by marcio »

Hey gorakh.nath,

In the example, that icon is set on CSS with the following rule:

.b-sch-horizontal .b-sch-event-wrap .b-sch-event-buffer .b-buffer-label:before {
  font-family: "Font Awesome 6 Free", FontAwesome6Free;
  content: "\f1b9";
  margin-inline-end: 0.3em;
}

And the color of the event buffer line is set like this:

.b-eventbuffer.b-sch-horizontal .b-sch-event-wrap .b-sch-event-buffer

Right now the only way to change that is to overwrite those classes, but I created a ticket to add a configuration for that - https://github.com/bryntum/support/issues/6136

Best regards,
Márcio


Post by marcio »

Hey gorakh.nath,

While the ticket is not implemented, you can also have it in a custom field on your events, for example, event.travelIcon, and then just add the related CSS class in the eventRenderer. :)

Best regards,
Márcio


Post Reply