My client has asked for the 'CalendarInput' of our app to have certain days highlighted based on whether some relevant data exists on that day. It seems there is no built-in way to handle that via the component itself so I'm looking at using Custom CSS.
My thoughts were to add a new selector, something like ''.retool-calendar-input li .highlight' then use JS to add the 'highlight' class to the necessary div(s).
However, I can't seem to find a way to add a CSS class to a div at runtime. Is this possible? If not then that's a real shame and is that feature likely to come soon?
How would I solve this request from our client if the Custom CSS feature couldn't handle this?
I don't think it's possible to apply selectors to Retool's DOM elements using JS at runtime.
You can use {{ }} to reference retool values when writing custom CSS.
The buttons have the date set as the aria-label so you could do something like this.
{{ query4.data.map(d => [aria-label="${d}"] {background-color: blue !important;}).join('') }}
query4.data is an array -> ['2025-01-01', '2025-01-04']
Retool may change selectors / DOM structure with any update though which can break custom CSS. So it would probably to build a custom component if you want something more reliable.
I can make a feature request to make custom styling for specific days inside our calendar component easier as well and will keep you posted on that!
