React-calendar: How to keep selected particular dates.

[manish774]

I have a list of event dates, so how can i keep selected those days in calendar?

[wojtekmaj]

You can only select one date or one range of dates in React-Calendar. However, you can use tileClassName to write a function that adds some styling to the tiles of the dates you want, or tileContent to add content to the tiles of the dates you want.

[suman-kr]

tileClassName?: string | string[] | ((props: CalendarTileProperties) => string | string[] | null);
Can you demonstrate with an example? How to use tileClassName with functions?

[wojtekmaj]

Something like this:

tileClassName={({ date }) => {
  if (shouldDateBeSelected(date)) {
    return 'selected';
  }
  return null;
}}

where shouldDateBeSelected is your function that checks if a given Date is on your list of selected dates, and selected is your CSS class that makes the tile as selected. Alternatively you can use predefined react-calendar__tile--active class.

[suman-kr]

It's working fine. But does not work on state updation. Shouldn't it be working on state updation?

[wojtekmaj]

If your tileClassName isn't defined in render() function, it won't automatically change with state update. Possible solutions are to re-define tileClassName whenever its dependencies are updated (like: you fetched new data from the server), or to keep this function defined in render().

[Shishouille]

Thanks a lot for your answers @wojtekmaj, this is a great component :smile_cat: