How rendering marked date in Calendar?

Question

I created a calendar in a react-native app and I would like to display a blue circle around the date that I have clicked. But I don't success to display it.

This is my code:

 const [currentDate, setCurrentDate] = useState(moment()
     .utcOffset('+01:00')
     .format('YYYY-MM-DD'));
 const [dateLimited, setDateLimited] = useState(moment()
    .utcOffset('+01:00')
    .format('YYYY-MM-DD'));

return(
     <Calendar markedDates={{currentDate: {selected: true} }} style={{ width: wp('80%'), height: hp('30%') }} minDate={'2020-01-01'} maxDate={dateLimited} onDayPress={(day)=> setCurrentDate( moment(day.dateString).format('YYYY-MM-DD'))}></Calendar>
);

What is strange is that when I write the date directly like this it works:

<Calendar markedDates={{'2020-04-28': {selected: true} }} style={{ width: wp('80%'), height: hp('30%') }} minDate={'2020-01-01'} maxDate={dateLimited} 
                onDayPress={(day)=> setCurrentDate( moment(day.dateString).format('YYYY-MM-DD'))}></Calendar>

And if I display in console.log currentDate, I got the right date :

2020-04-28

Could you please help me ?

Thanks in advance

check this sample created using class component - https://stackoverflow.com/a/59602003/9432559 — SDushan, Apr 28 '20 at 11:08

score 1 · Accepted Answer · answered Apr 28 '20 at 16:17

1

See the first comment of this SO question:JavaScript set object key by variable

To evaluate currentDate instead of just using it as a key, you have to put square brackets around: markedDates={[currentDate]: {selected: true}}

answered Apr 28 '20 at 16:17

Sinder

273
1
11

How rendering marked date in Calendar?

1 Answers1