Question

我使用的是大日历反应，需要在黑暗模式下更改文本的颜色。日历的背景颜色会更改，但是日期的文本颜色不会更改。如何运作？

const calendarStyle = () => {
    return {
      style: {
        backgroundColor: 'red', //this works
        color: 'green' //but why doesn't this work?
      }
    }
}   

<Calendar
      localizer={localizer}
      events={eventsData}
      startAccessor="start"
      endAccessor="end"
      style={{ height: 500 }}
      views={{ month: true }}
      step={155}
      dayPropGetter={calendarStyle}
/>

此外，如何更改标题（如sun，mon等）以及返回和下一个按钮的颜色。

Answer 1

使用日历的样式属性

<Calendar
      style={{ height: 500 ,color:'#fff' }}
      localizer={localizer}
      events={eventsData}
      startAccessor="start"
      endAccessor="end"
      views={{ month: true }}
      step={155}
      dayPropGetter={calendarStyle}
/>

Answer 2

您可以通过使用 react-big-calendar 的 components 属性传递组件来更改它们。例如：

<Calendar
  className={classes.calendar}
  localizer={localizer}
  events={events}
  startAccessor="start"
  endAccessor="end"
  dayPropGetter={getDayProps}
  eventPropGetter={getEventProps}
  components={{
    event: CalendarEvent,
    month: {
      header: HeaderCellContent,
      dateHeader: DateCellContent,
    },
  }}
/>

HeaderCellContent 组件示例：

const HeaderCellContent: React.FC<any> = (props: any) => {
  const { date } = props;
  const classes = useStyles();
  const dayOfWeek = date.getDay();

  const className = dayOfWeek === 0 || dayOfWeek === 6 ? classes.day_weekend : classes.day_working;
  return (
    <Box component="span" className={className}>
      {props.label}
    </Box>
  );
};

使用上例中的 className 或 style 道具，您可以将自己的样式传递给每个标题单元格的内容，而 dateHeader 用于自定义日历天的内容.

我找不到关于 components prop 的太多信息，但由于我使用的是 typescript，我通过检查类型文件找到了详细信息，我在下面包含了链接。

参考文献：

更改日历日期的颜色（反应大日历）

2 个答案: