Premium support for our pure JavaScript UI components


Post by gismya »

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


Post by marcio »

Hey Lars,

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

Best regards,
Márcio


Post by emmaback »

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


Post by marcio »

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.

Attachments
Screenshot 2023-04-04 at 10.15.39.png
Screenshot 2023-04-04 at 10.15.39.png (90.75 KiB) Viewed 1280 times

Best regards,
Márcio


Post by emmaback »

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

Attachments
Skärmavbild 2023-04-05 kl. 13.26.36.png
Skärmavbild 2023-04-05 kl. 13.26.36.png (189.71 KiB) Viewed 1246 times

Post by alex.l »

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

All the best,
Alex


Post by emmaback »

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


Post by alex.l »

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;
}

All the best,
Alex


Post by emmaback »

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


Post by alex.l »

Hi Emma,

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

Thank you for provided information.

All the best,
Alex


Post Reply