[Feature Request]: Calendar extended overstyling of internals

[ilhan007]

Feature Request Description

One behalf of our colleagues from SAP Marketing&IT, I am creating a request for extended overstyling for:

• calendar month and year views, in particular the font weight of the months/years cells to make the months/years text bolder
• the hover text and border color for last item in selected range within the day picker
• the text color of items in selected range within the day picker

More details in the comments below.

Proposed Solution

We need to check if we can expose some parts or variables to make this overstyling possible. Could be more difficult with parts as these are elements deeply nested and part of other internal web components like ui5-month-picker, ui5-year-picker, ui5-day-picker.

Proposed Alternatives

No response

Organization

SAP Marketing & IT (building UDeX web components)

Additional Context

No response

Priority

None

Privacy Policy

• [X] I’m not disclosing any internal or sensitive information.

[ilhan007]

Hi colleagues,

@SAP/ui5-webcomponents-topic-b

contact me if you need more information on this.

[ilhan007]

FYI @PlutaKatarzyna and as discussed please add the expected state.

[PlutaKatarzyna]

Thank @ilhan007 you for the ticket. According to out designs https://sap.frontify.com/document/223142#/-/date-picker here is what we expect to be able to add:

- hover text and border color for last range item - text color of items inside the range

Expected: Current:

- font weight of items in year/month selection

Expected:

Current:

[DMihaylova]

Hi @PlutaKatarzyna,

For the text color of items inside the range, we'll think of introducing a variable. For font weight of items in year/month selection, could you test whether --_ui5-v2-0-0-rc-6_monthpicker_item_selected_font_wieght: 100 would suit your needs? Example Have in mind that in our current implementation when the text is bold, that means that there is a selection for those month(s)/year(s), so it could be pretty handy. For hover text and border color for last range item, if I understand correctly, you expect to have a hovered end day of an interval. In our current implementation it's still hover, however it looks lighter than yours. Is that the problem?

Thanks & Regards, Diana

[PlutaKatarzyna]

Hi @DMihaylova ,

• CSS varibale will be great for text color inside range items.

• As for the font weight of items in year/month selection - unfortunately I do not see css variable that you mentioned. Moreover I see that year/month items are not bold anymore. Actually they do not even have any "selected" indicator anymore:

Not sure what happened and when did it happen, but apart from font-weight, we need a border it item is currently selected.

• For hover text and border color for last range item - on our designs there is different hover for item if it's inside a range. Also different start and end day of range, and middle day in range hover state. Here is what we currently expect to have (based on latest designs): This includes changing not only text color and background of hovered item, but also a border.

I see that our designers are constantly changing the designs, so we would appreciate flexibility in scope of text color, background color and borders.

Best regards Kate

[PlutaKatarzyna]

Hi @DMihaylova @tsanislavgatev , any chance this can be downported also to version 1.24?