Our powerful JS Calendar component


Post by jack123abc »

tried to change event background color as yellow, for day view, it looks good, the event text color is black:

eventC1.png
eventC1.png (19.22 KiB) Viewed 1061 times

but for month year view the color automatically change to white, it is difficult to read the text:

eventC2.png
eventC2.png (27.45 KiB) Viewed 1061 times

I tried to control the event text color use below code, but failed,

eventRenderer({ eventRecord, eventData }) {
                eventData.style = `background:yellow;border-color:white;color:black`;
            },

Post by mats »

What version are you using? The param to use is called renderData, this works well for me:

modes : {
            month : {
                eventRenderer({ eventRecord, renderData }) {
                    renderData.style = `background:yellow;border-color:white;color:black`;
                }
            }
        }

For month view eventRenderer, please see docs here: https://bryntum.com/docs/calendar/api/Calendar/widget/MonthView#config-eventRenderer

Attachments
Screenshot 2021-10-29 at 08.34.55.png
Screenshot 2021-10-29 at 08.34.55.png (220.38 KiB) Viewed 1051 times

Post by Animal »

Note that an event's "color" may be defined in its data as loaded from the server: https://www.bryntum.com/docs/calendar/api/Scheduler/model/EventModel#field-eventColor

In a MonthView, to help the end user distinguish between "all day" events and intra day events, all day events get that as their full background. They appear as a solid block of their data-defined colour.

Non all-day events have their icon colour set to their data-defined colour and have no background-color (unless its the active event - then its set to a solid bar)

So this scheme actually conveys extra information to the end user at a glance.

You can change the background-color of non all day events using CSS:

.b-monthview .b-cal-event {
    background-color: yellow;
}

This will leave the all day ones using their data-defined colour as their background-color.

To override this extra UI information that is being imparted via this difference, you could use !important on that, and also override the arrow colours on those all day events, so

.b-monthview .b-cal-event {
    background-color: yellow!important;
}
.b-monthview .b-start-arrow {
    border-right-color: yellow!important;
}
.b-monthview .b-end-arrow {
    border-left-color: yellow!important;
}

And to make the text show up on a light background:

.b-monthview .b-cal-event-desc {
    color: black;
}

That makes the all look the same, removing a lot of extra information from the UI that the end user may want to know from looking at the view.

As you can see, it doesn't look very good:

Screenshot 2021-10-29 at 09.52.47.png
Screenshot 2021-10-29 at 09.52.47.png (62.71 KiB) Viewed 1047 times

Post by jack123abc »

thanks for your quick reply, @mats @Animal. now I am experiencing the trial expired issue, already raised a post:viewtopic.php?f=54&t=19295 will continue do testing after that.


Post by mats »

Extended two more weeks now, please clear cookies to activate!


Post by jack123abc »

Thanks for the extended action. @mats. for the color issue, I just realized maybe this is different scenario. the color is automatically changed to white when the event is clicked, as follow:

eventc3.png
eventc3.png (81.14 KiB) Viewed 1036 times

even I changed the color as below code:

eventRenderer({ eventRecord, renderData }) {
                        renderData.style = `background:yellow;border-color:white;color:black`;
                    }

Post by mats »

The style you apply in the eventRenderer is applied to the event bar outer element. And the DOM structure contains of multiple DOM nodes that might have style rules attached. So best to investigate the DOM node that specifies that white color and create a more specific CSS rule that does what you need.

Attachments
Screenshot 2021-10-30 at 10.23.50.png
Screenshot 2021-10-30 at 10.23.50.png (164.79 KiB) Viewed 1031 times

Post by Animal »

That's when the event gets the b-active class. When the event is navigated to. That's when all events become a solid bar.

It assumes that the bar background colour will have enough saturation to require white text, so it changes the text colour.

For most colours, this works as you can see from the just-clicked event here:

Screenshot 2021-10-30 at 11.47.30.png
Screenshot 2021-10-30 at 11.47.30.png (26.42 KiB) Viewed 1027 times

Only for very washed out colours like pale yellow does it not work.

You can always use CSS to get things to look like you want:

.b-monthview .b-cal-event-desc {
    color: black!important;
}

So what you are planning to end up with is all events as a pale yellow bar regardless of whether they're all day events or not.

And no difference to identify the currently active event - the one that you just navigated to (Not everybody will be using a mouse to click to activate an event)

On both of these counts, an accessibility audit might bring up some points.

https://accessibility.digital.gov/visual-design/color-and-contrast/

https://developers.google.com/web/fundamentals/accessibility/focus


Post Reply