Premium support for our pure JavaScript UI components


Post by peterjc »

Hi, I have just upgraded to 5.3.6 (from 5.2.9).

In my application, I receive custom user configurable colors from our server. We use colors to dictate certain states throughout all our products, and we then color our events using whatever this color is (as also used in our other applications).

However, after upgrading to 5.3.6 eventColor seems to be restricted to some fixed colors?.

2023-05-29_07-35-24.png
2023-05-29_07-35-24.png (24.74 KiB) Viewed 162 times

It is absolutely essential part of our application to reflect the same color as used elsewhere in our suite. Is there perhaps another way our now setting this background color on the events?

Thanks in advance


Post by peterjc »

Hi,

failing any other solution, as I am already using a eventBodyTemplate anyway, I found I can add my own custom color property, set this, and then use this in the eventBodyTemplate where I am already adding a div on top of the event.

I also found I had to set the following..

.b-sch-event-content {
  width: 100%;
}

and this seems to work.

Perhaps this is the best way to address this, or is there something else recommended?

Thanks in advance.


Post by alex.l »

Hi,

It was always supported only a range of pre-defined colours in eventColor property. We just fixed typings for that property.
Regarding to your solution, you're right, you can use cls field in TaskModel to apply CSS you want.
I tried in our advanced demo, added into resource/app.css the following code

.custom-color.b-gantt-task {
  background-color: yellow;
}

and into tasks array in launch-sass.json

              {
                "id"             : 12,
                "name"           : "Configure firewall",
                "percentDone"    : 50,
                "startDate"      : "2019-01-14",
                "cls"            : "custom-color",

And all works as expected

Screenshot 2023-05-29 at 18.19.28.png
Screenshot 2023-05-29 at 18.19.28.png (272.99 KiB) Viewed 126 times

Extra CSS that you need to use might be caused by your custom eventBodyTemplate. Try to use default renderers and compare result.

All the best,
Alex


Post by peterjc »

OK, never realized that about eventColor.

At any rate yes I can use css on my div that I already have sitting on top of the event element, ands this also work perfectly

Thankyou


Post by alex.l »

Thank you for your question.
After more deep testing we found that actually eventColor will be working well with HEX values also. I've opened a ticket to fix docs and typings https://github.com/bryntum/support/issues/6874
Meanwhile, you can add ts-ignore and continue using HEX values.

All the best,
Alex


Post Reply