Bryntum Support Forums

Trying to set eventColor on EventSegments in Scheduler Pro, but it does not change the color. The eventColor used in this example is not taking affect either. https://www.bryntum.com/products/gantt/docs/api/SchedulerPro/feature/EventSegments.

Kind Regards,
Lars

Hey Lars,

Thanks for the report. I created a ticket to fix that - https://github.com/bryntum/support/issues/6510

Hello,

I tested with the latest version to add an eventColor to segments, both locally and your example, https://bryntum.com/products/schedulerpro/docs/api/SchedulerPro/feature/EventSegments, and it seems like only responds to color names, not hex numbers for example. Would it be possible to add support for this?

Also, if the parent event has a set eventColor, the eventColor of the segment will not appear. Can you look into this?

Best regards,
Emma

Hey Emma,

Regarding the HEX color support, I created a feature request ticket for that https://github.com/bryntum/support/issues/6531

And about the parent event with color, I tried to reproduce that on our demo, but the children's event color got used correctly, check the attached screenshot.

Hi again,

Thanks for adding that feature request!

I tested the demo again, and it seem to be a similar issue. It only passes on the eventColor if it is a color name ("red", "blue" etc), not a hex as we want to do for our use case. See attached image.

If I have a single event, hex color works but not for segments of an event.

// Emma

Hi Emma,

It only supports a list of event colors, see docs https://bryntum.com/products/schedulerpro/docs/api/Scheduler/model/mixin/EventModelMixin#field-eventColor

Controls the primary color of the event, see Schedulers eventColor config for available colors.

https://bryntum.com/products/schedulerpro/docs/api/Scheduler/view/mixin/TimelineEventRendering#config-eventColor

Hi again (opening this thread again),

I see. Could this be considered a feature request in that case?

In our use case, we want to dynamically set each segment background-color based on what the parent status color is (which in our case will be a hex value).

This is how we today set background-colors of all events in our existing version of the Scheduler, and it is essential for us to have the segments match the parent event color, seeing that segments are just pieces of the parent event.

Hope that makes sense!

Best,
Emma

Hi Emma,

That might be easily done using cls field for segment record. You can apply any styling you need with CSS.

        eventsData : [
            {
                id        : 2,
                name      : 'DIY project',
                startDate : '2022-03-21',
                segments  : [
                    { name : 'Plan', startDate : '2022-03-21', duration : 1, cls: 'custom-segment-red' },
                    { name : 'Get supplies', startDate : '2022-03-23', duration : 2  }
                ]
            }

CSS

.custom-segment-red {
    background-color: red;
}

Hi again,

Thanks for getting back to me. This solution will not work for us, since we are getting the hex color from through our API, eg. status.color, which we want to style each segment with:

  eventsData : [
            {
                id        : event.id,
                name      : event.name,
                startDate : event.start_date,
                endDate : event.end_date,
                eventColor: event.status.color,
                segments  : event.segments.map((segment) => {
                    { 
                      name : segment.name, 
                      startDate : segment.start_date, 
                      endDate: segment.end_date, 
                      eventColor: event.status.color,
                    },
                }),
            }
]

So the eventColor of each segment will depend on what we get from event.status.color, that is why we cannot set it with cls and a static color code (eg red).

We are styling all of our events in the scheduler based on colors coming from our API, that is why we depend on it for segments as well.

Hope that makes sense!

Best,
Emma

Hi Emma,

I've opened a FR for your request here https://github.com/bryntum/support/issues/6745

Thank you for provided information.