Styling Range

[maybecrimson]

Hello. I am in need of style the range in the calendar: a continuous background colour from start to end with border radius at the start/end of the row if is the case. Thank you.

[enaluz]

Did you ever figure this one out? @maybecrimson

[siddharthshankarpaul]

+1

[MVR5991]

Is there any progress or workaround? Really need this :/

[maybecrimson]

No news about this topic 😭

[m-suchorski]

+1, a class for the end of selection range is missing.

[nc-mdh]

Not sure if this solves your problem. You can use the range classes to style the range. Obviously each day is a single element, so I had a problem with radius and background-color on start and end day of range. However I was able to solve it using radial-gradient:

.react-datepicker__day--range-end { background: radial-gradient(circle 16.5px, rgb(1, 160, 80) 94%, rgb(1, 160, 80, 0.1)); color: #fff; border-top-right-radius: 100%; border-bottom-right-radius: 100%; }