React-calendar: How can I use multiple values array?

[fasmart4]

i can't use value more than 2 value of array

<Calendar
   onClickDay={value => alert('Clicked day: ', value)}
   value={[new Date(), new Date().setDate(12)]}
/>

it work
but if value is [new Date(), new Date().setDate(12) , new Date().setDate(14)]
error invalid date

and How can i custome style of value active

[tquiroga]

I'm struggling setting an array of dates too. I load some events and get their dates in an array passed to value. it works initially. When I scroll my events and get my infinite scroll to load more events, it adds the new dates to the array and I get Invalid date error.

I believe there is an error somewhere over here: https://github.com/wojtekmaj/react-calendar/blob/master/src/Calendar.jsx#L59

If the array has more than 2 values it tries to instantiate: const valueFromDate = new Date(rawValueFrom); where rawValueFrom is an array of dates and results into Invalid date error.

[wojtekmaj]

Hi,
Three values is not a valid format. You either set one value or an array of two values which is a way of setting date range. There's no way to set multiple values at the moment :(

[tquiroga]

If you just need to highlight dates in the calendar, a workaround is to use tileClassName with the function:
({ date, view }) => // check if the date is in your array here and return className accordingly...
And then style it as you wish.

[wojtekmaj]

That's not really a workaround, that's actually recommended thing to do ;)

[orhan-swe]

@tquiroga
This is a good solution but to get it to work one must first inject an array with the first and last date of the month to the "value" prop (if one wants to be able to highlight any date of the month). But as this will set all dates as active one must then set them all as inactive by overriding .react-calendar__tile--active. The solution below is for a problem of type "when hovering over some area some calendar dates should be highlighted":

<ReactCalendar
    key={index}
    activeStartDate={moment().subtract((clusterPatternDays.length - 1) - index, 'months').startOf('month').toDate()}
    tileClassName={({date, view}) => {
        if(view === 'month' && highlighted && (dates || []).includes(date.toDateString())) 
            return classNames({[`calendar-${highlighted}`]: highlighted});
        else {
            //we must override the active class otherwise everything will show as selected all the time
                return "react-calendar__tile--inactive";
        }
    }}
//for the dates to be highlighted we must inject all dates for the month to value prop
    value={[ 
        moment().subtract((clusterPatternDays.length - 1) - index, 'months').startOf('month').toDate(),
        moment().subtract((clusterPatternDays.length - 1) - index, 'months').endOf('month').toDate()
 ]}
/>

This does work but if there is a better solution I would like to know.

[wojtekmaj]

I'm closing this issue to give other issues more visibility. If you still need assistance with this matter, please do not hesitate to reply and I'll reopen.

Happy coding!