how to change the background color of specific days in react-big-calendar

Question

I'm trying to change the backgroundColor of specific days.

Ideally I would like to change the background color for the days that contain events on them but in this particular case because I'm testing the library I'm just trying with the 16th day:

const dayPropGetter = useCallback(
  (date) => {
    return {
      ...(DateTime.local(date).day === 16 && { style: { backgroundColor: 'blue' }})
    }
  }
, [])

My code should make the background color of the 16th day on my calendar to be blue, it is almost the same as the example they put in the docs however nothing happens.

This is my calendar component:

<Calendar
  localizer={localizer}
  views={['month']}
  dayPropGetter={dayPropGetter}
  events={events}
  style={{height: 500}}
/>

Answer 1

I'm using this function to change the style on the current day, but you just have to adapt the logic for what you want to use, here's the function:

  const calendarStyle = (date) => {
    let currentDate = `${new Date().getDate()} ${new Date().getMonth()+1} ${new Date().getFullYear()}`
    let allDate = `${date.getDate()} ${date.getMonth()+1} ${date.getFullYear()}`

    if ( allDate === currentDate)
    return {
      style: {
        backgroundColor: '#88C9E8', 
        border: '1px solid gray',
        margin: 0,
        padding: 0
      }
    }
}

And in the calendar, just pass this prop:

dayPropGetter={calendarStyle}

Answer 2

This is probably due to your Luxon object. You're trying to pass a js Date object to DateTime.local() when you really want DateTime.fromJSDate().