React-calendar: How to highlight specific dates only in calendar and disable all other dates?

[bilalbutt044]

i want to highlight dates base on data i am getting from API and disable other dates.Is there any way to highlight specific dates because currently, I can see only minDate and max date props which just enable dates which this range BUT i want to highlight the specific date in the calendar. Actually This calendar i am using for event management to show event dates on calendar.

[Damercy]

Was facing the same issue until I found a workaround. I'm also working on a similar event management project so I believe it should help.

After getting your data, let's say it's stored in as an array of objects. Use the includes() function of an array to check if the given date exists or not and based on it, return true to disable the given date.

Ex:- I made an array filled with random values (within ranges of 1-31) initially. Then, inside the function which is being called by tileDisabled, do following:

 if(this.state.setDisb.includes(date.getDate()))
      return true;

Or to be more concise:

 return this.state.setDisb.includes(date.getDate())

Hope it helps!

[bilalbutt044]

@Damercy thanks for this help. can you please confirm on returning true , date will get highlight or disabled? because i want to highlight dates which are coming from API .

[Damercy]

On returning true, the date gets disabled.

[bilalbutt044]

seem like we can disable but we cant highlight or preselect Dates some specific dates. anyway, thanks for your help.

[kubanychbekovmurat]

You can use "tileClassName" as a prop to Calendar. It should return a class name which will highlight the dates that needs to be highlighted.

[bilalbutt044]

@kubanychbekovmurat can you please provide an example of this ?

[kubanychbekovmurat]

Let's say you have a function getClassName that takes date object as an argument.

const getClassName = (date) => {
      if (highlightedDates.includes(date)) {
          return "highlighted_dates";      
       } else {
          return "not_highlighted_dates";  
      }
};

Where hightlightedDates is an array of dates that should be highlighted, and "highlighted_dates" and "not_highlihted_dates" should be the style in your css file.
Then you just need to pass this function to Calendar as a prop:

<Calendar 
   tileClassName={(props) => getClassName(props.date)}
   calendarType="US"
>

Disabling specific dates follows the same logic.

[wojtekmaj]

To disable some days, you need to write tileDisabled function that returns true for dates that should be disabled.

To highlight other days, you need to write a tileClassName function that returns a class name for dates that should have them.

In your specific dates, your tileClassName can even look like that:

function tileClassName(args) {
  const isDisabled = tileDisabled(args);

  if (!isDisabled) {
    return 'my-class-name';
  }
}

See also:
https://github.com/wojtekmaj/react-calendar/issues?q=is%3Aissue+tileDisabled
https://github.com/wojtekmaj/react-calendar/issues?q=is%3Aissue+tileClassName

[elebumm]

I found the answer that @Damercy provided to be useful, but I just did the opposite. In my case, I needed to highlight the days that were provided by my API. in this case as well, it was an array of objects, so a simple .includes didn't work for me. Here is my solution:

<Calendar
            calendarType="US"
            onChange={handleDateChange}
            value={date}
            navigationLabel={({ date }) => `${months[date.getMonth()]}`}
            tileDisabled={({ activeStartDate, date, view }) =>
              priorityDays.some(
                (day: any) => day.date !== moment(date).format("YYYY-MM-DD")
              )
            }
          />

This line here:
priorityDays.some((day: any) => day.date !== moment(date).format("YYYY-MM-DD"))

If you switch from === to !== it will switch behaviour (=== will disable just the dates inserted while !== will disable all but the ones in my API).

Great Library.