javascript - 如何更改react-big-calendar中特定日期的背景颜色

Question

我正在尝试更改特定日期的背景颜色。

理想情况下，我想更改包含事件的日子的背景颜色，但在这种特殊情况下，因为我正在测试我只是在第 16 天尝试的库:

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

我的代码应该使日历上第 16 天的背景颜色为蓝色，这与他们在 docs 中放置的示例几乎相同然而什么也没发生。

这是我的日历组件:

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

Answer 1

我使用这个函数来更改当天的样式，但您只需根据您想要使用的内容调整逻辑即可，函数如下:

  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
      }
    }
}

在日历中，只需传递此 Prop :

dayPropGetter={calendarStyle}