Изменить цвет календарных дат (реагировать на большой календарь)

Я использую большой календарь React, и мне нужно изменить цвет текста для темного режима. Цвет фона календаря меняется, но цвет текста даты не меняется. Как заставить работать?

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

Более того, как изменить цвет заголовков, таких как солнце, пн и т. Д. И обратно, а также кнопка «Далее».

введите описание изображения здесь


reactjs react-big-calendar
person Amrita Stha    schedule 03.11.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Использовать свойство стиля календаря

<Calendar
      style={{ height: 500 ,color:'#fff' }}
      localizer={localizer}
      events={eventsData}
      startAccessor="start"
      endAccessor="end"
      views={{ month: true }}
      step={155}
      dayPropGetter={calendarStyle}
/>
person Rakhil    schedule 24.05.2021
comment
Я полагаю, что опора стиля для <Calendar предназначена только для родителя. Это не повлияет на отдельные стили элементов. - person Vijay Dev; 25.05.2021

arrow_upward
0
arrow_downward

Вы можете изменить их, передав компоненты с помощью свойства components prop в react-big-calendar. Например:

<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 предназначен для настройки содержимого календарных дней.

Я не смог найти много информации о поддержке компонентов, но поскольку я использую машинописный текст, я нашел подробности, проверив файл типов, я включаю ссылку ниже.

Использованная литература:

person Bob    schedule 03.06.2021