How can I use multiple values array?

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]

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.

[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.