React-native-calendars: What's the easiest way of having a full, marked interval of dates?

[dani-mp]

Hi, I love the library, it's so beautiful and easy to use.

I was wondering if I'm missing something here. I'm trying to show a single interactive marking interval between two dates. I'm setting the starting and the ending ones, but the ones in the middle don't get marked. All the examples I've seen are with contiguous dates, so I'm guessing I have to explicitly mark the ones in between as well. If this is the case, how is the recommended approach? My first idea was to build an array of the dates between the start and the end of the interval, using Xdate's addDays function, I guess, and populate the markedDates with that info, but maybe this is overkill and I'm missing something.

Thanks in advance!

[overengineered]

You have to set color to all intermediate dates in the marked dates, like this

markedDates={{
        '2012-05-24': [{startingDay: true, color: 'gray'}],
        '2012-05-25': [{color: 'gray'}],
        '2012-05-26': [{endingDay: true, color: 'gray'}]
}}

A builder function that takes two dates and builds an object for marking that range of dates could be part of this library, PR would be welcome.

[dani-mp]

Yeah, I tried that and it worked, I thought I was missing something. Thanks for answering.

About the builder function, it's fairly easy to implement and apart from the dates it also involves different colors (although I'd use only one for a marked interval, otherwise it looks weird), so I don't know if it's worth expose it as a part of the library API.