Why aren't edge dates marked as active as well?

[LoyalPotato]

Before you start - checklist

• I followed instructions in documentation written for my React-Calendar version
• I have checked if this bug is not already reported

Description

I've this codesandbox which shows that when values are set to new Date() and two days less than that, that the edge dates won't be marked as --active but will only have --hasActive.
It causes some troubles because I want to style those edge but if I use --hasActive or --range ( which in the sandbox isn't being set beyond the month view, but in my environment it sets ) it will style other elements that I weren't meant to be stylised.

Why is this the case and shouldn't it be considered active as well?

Steps to reproduce

Steps in sandbox.

Expected behavior

Edge dates to also be set as active.

Actual behavior

Sets them as --hasActive.

Additional information

No response

Environment

• Browser (if applicable):
• React-Calendar version:
• 3.7.0
• React version:
• 18.1.0

[wojtekmaj]

This is because your edge dates are in the middle of the day, so these days are only partially selected. If you set "date from" hour to 00:00:00.000 and "date to" hour to 23:59:59.999, they will be marked as fully selected.

Please mind that this is just styling really - so you could just fix that in your CSS as well if you like it. I don't recommend that option though, as some accessibility features may be introduced in the future that will make this not entirely correct.

[LoyalPotato]

Got it. Thanks for the reply :)