Is there any way to add different background color in React big calendar for entire date cell only when there is any event displayed on cell?

Question

Currently I am trying to use this below:

const ColoredDateCellWrapper = ({ children, value }) =>
  React.cloneElement(Children.only(children), {
    style: {
      ...children.style,
      backgroundColor: value < CURRENT_DATE ? "lightgreen" : "lightblue",
    },
  })

but it won't work for me as I need to add different backgroundColor for the cells having events array.

score 0 · Answer 1 · answered Jul 17 '20 at 11:33

0

Yes in eventStyleGetter you can return the class name and provide the background color to the cell where events are there.

answered Jul 17 '20 at 11:33

unns

19
3

please feel free to write some code in your answer to illustrate what you mean – Aprillion Jul 17 '20 at 11:44
Yes Sure we can use eventStyleGetter in this way const eventStyleGetter = ( start, isSelected) => { var style = { //whatever styles you wana give }; return { className: "yourclassname", style: style, }; }; and then in your component you can use this eventPropGetter={eventStyleGetter} way. – unns Jul 17 '20 at 11:59
i would be able to help more if you could post what are you passing to your calendar component – unns Jul 17 '20 at 12:03

Is there any way to add different background color in React big calendar for entire date cell only when there is any event displayed on cell?

1 Answers1