React Big Calendar style previous days to current date

Question

I would like to styles the background of previous days according to the current date.

I'm trying to follow this example here, but I get the error:

Invariant Violation: React.Children.only expected to receive a single React element child.

Which is crazy, because it works in the example. Also, there is no information about the dateCellWrapper in the docs, which doesn't help much.

Here is the code:

const ColoredDateCellWrapper = (children: any, value: any) =>
    React.cloneElement(Children.only(children), {
        style: {
            ...children.style,
            backgroundColor: value < this.state.currentDay ? 'lightgreen' : 'lightblue',
        },
    });

<BigCalendar
    showMultiDayTimes
    localizer={localizer}
    selectable
    selected={this.state.selected}
    onSelectEvent={this.onSelectEvent}
    onSelectSlot={this.onSelectSlot}
    events={this.state.events}
    step={60}
    timeslots={1}
    defaultView='week'
    startAccessor="start"
    endAccessor="end"
    defaultDate={new Date()}
    components={{
        dateCellWrapper: ColoredDateCellWrapper
    }}
/>

Thank you! :)

Vishal · Accepted Answer · 2019-03-22T11:50:22.217

1

There is a problem in 1st line of your code:

const ColoredDateCellWrapper = (children: any, value: any) =>

It should be:

const ColoredDateCellWrapper = ({ children: any, value: any }) =>

In short you are passing two arguments to ColoredDateCellWrapper, but it expects only 1. After destructuring you should get two props.

Update as asked by OP:

If you don't want to use destructuring, then you can do it like this:

const ColoredDateCellWrapper = (props: any) =>
React.cloneElement(Children.only(props.children), {
    style: {
        ...props.children.style,
        backgroundColor: props.value < this.state.currentDay ? 'lightgreen' : 'lightblue',
    },
});

edited Mar 22 '19 at 11:50

answered Mar 22 '19 at 11:44

Vishal

6,238
10
82
158

I am working with typescript, that is why I did like that :x – RCohen Mar 22 '19 at 11:45
@RCohen Look at the curly braces inside paranthesis. – Vishal Mar 22 '19 at 11:46
I added the curly braces just now, and typescript is complaining about the syntax like this `({children: any, value: any})` – RCohen Mar 22 '19 at 11:48
Thank you very much! ^^ – RCohen Mar 22 '19 at 11:49
The error is no longer there, but it is not applying the background color :S. – RCohen Mar 22 '19 at 11:53
@RCohen actually, I have never used `BigCalendar`. But still let me take a look at it. – Vishal Mar 22 '19 at 11:55
Thank you! The docs are not very specific about its props, unfortunately :( – RCohen Mar 22 '19 at 11:56
@RCohen can you please share the code of whole file you are working with? – Vishal Mar 22 '19 at 11:56
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/190500/discussion-between-rcohen-and-vishal). – RCohen Mar 22 '19 at 11:58

React Big Calendar style previous days to current date

1 Answers1