React-calendar: tileClassName not working properly

[dumkanki]

Hello

as i am using tileClassName in this way .

<Calendar
  tileClassName={({ date }) => {
    this.checkdates.forEach((data, index) => {
      let datedata = new Date(data)
      let dateOne = moment(date).format('L');
      let datetwo = moment(datedata).format('L');
      if (dateOne === datetwo) {
        return "testdata";
      } else {
        return null;
      }
    })                             
  }}
  minDate={new Date()}
  tileDisabled={this.disableddate}
  onChange={this.ondateChange}
  value={this.state.date}
/>

and in css file i have made the class name testdata

.testdata {
  background-color: blue;
  color: red !important; 
}

but the change i can't see in calendar dates even though the condition is matched . Please help

[wojtekmaj]

The reason your code doesn't work is because you return nothing from tileClassName.

Modify your code so that tileClassName function returns the class name. It'll work.

Example solution: https://codesandbox.io/s/react-calendar-tile-class-name-dumkanki-lppn0

[dumkanki]

thank you so much for your help.

Thanks & regards
Ankit Dumka

On Thu, Sep 10, 2020 at 7:16 PM Wojciech Maj [e-mail]
wrote:

The reason your code doesn't work is because you return nothing from
tileClassName.

Modify your code so that tileClassName function returns the class name.
It'll work.

Example solution:
https://codesandbox.io/s/react-calendar-tile-class-name-dumkanki-lppn0

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/wojtekmaj/react-calendar/issues/428#issuecomment-690299638,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AJHWC5TXUYA2FR3OYQ7DS5TSFDKEJANCNFSM4RC3BKBA
.

[LeandroFrazao]

Hello,
I am trying to apply tileClassName to my react native project, but it doesnt work.
Is there any way I can use stylesheet instead of css file?

[wojtekmaj]

I think you're in a wrong repository @LeandroFrazao. This is not a package intended for React Native.