multiple "unavailable" blocks

[bensialih]

Hey guys,

Really good work but have a problem setting multiple "unavailable" blocks. When I add a few, the css looks funky. One "unavailable" is good, but more than one the css goes crazy. Please see the attached photos.

Thanks in advance

[AlanFoster]

@bensialih Would you mid posting your configuration? I'm unable to replicate locally:

[sub]

I had this kind of problem when I used to set single days as unavailable, not ranges.

[bensialih]

ooo the plot thickens. I think any kind of mutation of the moment object tends to start creating problems. If I format the date before I pass it to the frontend it works fine but once its parsed theres issues.

If I use .utcOffset on moment, it cuts off the date when its rendered to the calendar. I think the original error had moment time changed.

[bensialih]

On thing I have noticed is different ways of initializing dates.

I have 2 ways of parsing my dates. The first one generates my error. The second doesnt. Its weird because .map returns the same array as the one generated with for each loop.

[bensialih]

Yep, Im officially stumped.

I managed to get the calendar to work with 3 entries. When I added a 4th: it went back to checkered tiles on the calendar.

Please see images.

[balazsorban44]

I seem to have the same problem! I use an async function to fetch some unavailable dates, and then I make an array of the desired form. then I send the array to DateRangePicker, and if it is longer than one, I get this pattern as well:

@AlanFoster Do you have any idea?

[balazsorban44]

I think the problem starts somewhere here.:

https://github.com/onefinestay/react-daterange-picker/blob/fa06e531da5ca7bd422ab87db17cc09b1a4db51e/src/calendar/CalendarDate.jsx#L175

when a date is not a boundary, the states should only contain one date, what you use to determine the numStates later on, and finally if the date should be rendered as fully colored, or just half.

But dateRangesForDate returns more than one dates even if it is not a boundary.

[james-ff]

I came across this issue today and realised that I fixed it previously. You have to provide your date ranges in chronological order. Add this line to the end of your dateStates array:

dateStates.sort((a, b) => moment(a.range.start).isBefore(moment(b.range.start)) ? -1 : 1

[Vinz93]

@james-ff thanks so much your solution worked for me