Реагировать на большой календарь при наведении на ячейку в режиме просмотра дня

Можно ли изменить цвет ячейки даты в представлении дня при наведении курсора в большом календаре React?


person unns    schedule 29.07.2020    source источник
comment
пожалуйста, предоставьте codeandbox для этого и дайте нам более подробную информацию о том, чего вы хотите достичь   -  person Apostolos    schedule 29.07.2020


Ответы (1)


Вы можете применять пользовательские классы к событиям, используя реквизит eventPropGetter, и использовать псевдоселектор css :hover CSS для изменения цвета фона событий.

http://jquense.github.io/react-big-calendar/examples/index.html#prop-eventPropGetter

const customEventPropGetter = ({event, start, end, isSelected}) => {
  const myClasses = ['my-custom-event']; // add to every event
  if (event.someProp === 'foo') {
    myClasses.push('foo-event'); // conditionally add to some events
  }
  return { className: myClasses, style: {} };
};
// custom sass
.my-custom-event {
  &.foo-event {
    background-color: red;
    &:hover {
      background-color: maroon;
    }
  }
}
person Steve -Cutter- Blades    schedule 19.09.2020