How to highlight selected day or days in react big calendar

Question

I want to create an calendar similar to airbnb and therefore I would like to be able to highlight the selected days in react big calendar.

I have found a similar question, but it doesn't really answer what I need:

How to select multiple days in react-big-calendar

I have tried using onSelectSlot, but it doesn't change the color for example.

                    <Calendar
                            selectable={true}
                            popup
                            localizer={localizer}
                            events={events}
                            startAccessor="start"
                            endAccessor="end"
                            components={{
                                dateCellWrapper: ColoredDateCellWrapper
                            }}
                            style={{
                                display: 'flex',
                                paddingTop: '20px',
                                height: '75vh',
                            }}
                            onSelectSlot={handleSlotSelection}
                        />


                     const handleSlotSelection = ({ start, end, action }) => {
                          return  { style: { backgroundColor: 'red' } };
                     };

Does anybody know how I could achieve this?

score 2 · Answer 1 · answered Aug 13 '20 at 09:19

If it is not solved yet. Please try like below. Otherwise, hope it would be helpful for somebody.

ColoredDateCellWrapper = ({ children, value }) =>{
          let selDate = this.state.selectedDate;
          let valueDay = value.getFullYear()+'/'+value.getMonth()+'/'+value.getDate();
          let selDay = '';
          if(selDate!==''){
            selDay = selDate.getFullYear()+'/'+selDate.getMonth()+'/'+selDate.getDate();
          }  
          let cellStyle = React.cloneElement(Children.only(children), {
             //className:valueDay === selDay ? "yourclassname rbc-day-bg": "rbc-day-bg",
             style: {
              ...children.style,
              backgroundColor: valueDay === selDay ? "red": "",
            },         
          });  
          return cellStyle;  
       }



 handleSlotSelection = (date)=>{      
      this.setState({selectedDate:new Date(date.start)});
   }

How to highlight selected day or days in react big calendar

1 Answers1