0

i am currently working on a project and would like to modify individual cells of the react-day-picker. The usual modifiers are not enough for me, because I want to replace the number of days with a smiley (picture).

Example of a modified cell with smiley

The specific days that I want to change and replace with an image I only know when I load the component. Therefore, the variant should work the same as the usual modification of a cell. I get data and know which smiley fits which tag and change the cells accordingly.

Does anyone have a tip or a solution for this problem?

I would be very grateful. :)

Yours sincerely, Luke

Luke
  • 1

1 Answers1

0

Create a function which returns the content for each day and pass it to renderDay prop.

<DayPicker
  initialMonth={new Date()}
  renderDay={this.renderDay}
  showOutsideDays
/>

renderDay(day) {
  return(
    <div>
        { day.getDate() == 15
          ? <img src=""></img>
          : <span>{day.getDate()}</span>
        }
    </div>
  );
}

Refer this - https://react-day-picker.js.org

Amith Raj
  • 36
  • 4