How to style highlightedDates buttons dynamically in IonDatetime

Goal

Using Ionic/React 7.0.0 - React 18.2.0

In my IonDatetime component, I want to style calendar day buttons based on

• Input data : (1) available session during a day → Display a green calendar day (2) busy day → red.
• User interaction : available or busy date is clicked, I’d like to pick the color of my choice and prevent base color to apply.

What I tried

• When a calendar day is clicked, I’m setting the date in a state.
• I have a useEffect (with the given state as a dependancy) which is setting the relevant array for my highlightedDatesprops in IonDatetime.

Logs, Screenshots

Problem

The styles applies properly when calendar day buttons are just displayed but they don’t apply as expected when the calendar day is active (clicked)

• Programmatically the logic works well, as you can see in the logs (above)
• Using background or backgroundColor results the same
• If I comment backgroundColor: '#fff', calendar day button has a colored background and font from both section of the if hasFocus applies (see screenshot 1, 2, 3)
• If I keep backgroundColor: '#fff', the colored background and font doesn’t apply, just the active style that I do not want (screenshot 0)

Questions

• Am I approaching the issue the wrong way ?
• Does anyone have a clue of how to change style for highlightedDates based on element state ?

4 posts - 2 participants

Read full topic