react-date-range as read only calendar

Question

I'm looking for a way to use react-date-range in display only mode:

• no inputs
• no calendar selection
• no change event

The goal is to be able to show ranges on the calendar without allowing changes to it. (Some users have sets the ranges, some users can only view them)

So far I've managed to:

• disable the inputs
• hide the preview on hover
• not respond to selection

<DateRange
        ranges={[state.selection1, state.selection2, state.selection3]}
        editableDateInputs={false}
        showPreview={false}
        onChange={()=>{}}
        rangeColors={["#FFB800", "#B8FF00", "#B800FF"]}
      />

Then I can do some css hacking:

.rdrDateDisplayWrapper {
   display: none; 
}
// etc

Is there a better way ?

Answer 1

I believe you will be better off using a separate component rather than trying to make a workaround with react-date-range.

You should be good using the new react-lightweight-calendar which is feature rich and smaller in size compared to the older react-calendar component. Both of which were designed for the use case you described.