React-calendar: Provide a way to style an active tile

[Albert-Gao]

Hi, really awesome component.

Just one question, can't find it on the doc in terms of style the selected tile.

1. For active tile

I currently override .react-calendar__tile--active and button.react-calendar__tile--active:enabled:hover, button.react-calendar__tile--active:enabled:focus, works but seems pretty hacky.

2. For disabled tile

And for button.react-calendar__tile:disabled as well.

3. For current value tile

This one not works, well, if I override .react-calendar__tile--now, then it won't change when select another value or change to another month.

I think the custimize for these 3 cases will be awesome. Or I miss something?

Thanks :)

[wojtekmaj]

Hmmm, if you're willing to do major changes to the styling, why won't you import React-Calendar without your styles, and import your own styles (which of course may be based on the defaults)? This way you won't have hacky overrides and you'll have everything in one place. :)

[Albert-Gao]

Thanks. But it will lose lots of default style, I just want to change things like padding, color, etc. Is it possible to just have the ability to pass our own className to these situations?

[wickedwick]

Regarding number 3 in the original question, any chance we can get a className for the current date without passing the value prop? I would like to style the current date independently of any dates selected.
Maybe always apply .react-calendar__tile--now to the current date tile or provide another className for the current date.

[whizkydee]

@wickedwick, me too! Exactly why I'm here. @wojtekmaj is there a way to style the current date? Is there a className for it? I can't find it here. Thanks.

[wojtekmaj]

@whizkydee

If by current date you mean "today", "this month", "this year", etc.: .react-calendar__tile--now
If by current date you mean selected date: .react-calendar__tile--active
If you'd like to get a tile that _contains_ selected date but doesn't fully cover it (e.g. value is Feb 10-14 and the tile is February): .react-calendar__tile--hasActive

[wickedwick]

@wojtekmaj Thanks for replying here. To clarify my question above. My team would like to style the current day without having to pass in the value prop. If nothing is passed in for value, then the .react-calendar__tile--now className is not applied.

[wojtekmaj]

@wickedwick Tracked under #101. I'm closing this one as the question is answered.

[nathanhfoster]

@wojtekmaj How can I place the component to the top left of the parent? I don't want the days of the month to be centered in the middle of the container.

[wojtekmaj]

@strap8 Please raise another issue. This topic is unrelated and you're notifying other people without a good reason.