React-native-calendars: mark multiple dates dynamically

[sfm2222]

Question

How to mark multiple dates dynamically. The below won't work as array cannot be directly assigned.

var nextDay =['2018-06-01',
       '2018-06-05',
       '2018-06-08',  
       '2018-06-07',
       '2018-06-18',
       '2018-06-17',
       '2018-05-28',
       '2018-05-29'];

   const mark = {
    [nextDay]: {selected: true, marked: true}
   };

[KirankumarDafda]

Answered your question here : https://stackoverflow.com/a/50597708/3840093

First of all you have to create an object of date and select string, and then add that state variable into your calendar element.

[kinza88]

@sfm2222 Did the provided solution work?

[abn0rmal-d0ct0r]

@KirankumarDafda i did the same as mentioned here https://stackoverflow.com/a/50597708/3840093 .
all the dates retrieved from the server are marked. However I noticed that the ones marked are only those in 2018 and not 2019.

Any suggestion as to why this happens?

[KirankumarDafda]

I am currently working on this and my all marked dates are working fine, so you may need to check & confirm your date format or other details.

[helloitsm3]

What about dynamically marked dates with selected dates? How do I combine both?

[KirankumarDafda]

What I am doing for this is load all dynamically marked dates first, create array of it, and then concat selected dates with its value one by one to the array of dynamically marked dates.

[helloitsm3]

Thank you. I manage to find a way to dynamically add the dates selected as well as the marked dates.

[ramanasak]

how to fetch dates dynamically and mark dates ,can anyone please put some reference code .

[helloitsm3]

how to fetch dates dynamically and mark dates, can anyone please put some reference code.

This is how I did it. I fetched my dates using Axios and store all marked dates in an array. Once it's stored, I assigned the marked: true to the dates and parse it as an object. It would look something like this.

this.setState({ booking_dates: [...this.state.booking_dates, booking.booking_date] })); } }).then(() => { const obj = this.state.booking_dates.reduce( (c, v) => Object.assign(c, { [v]: { selected: false, marked: true } }), {} ); this.setState({ marked: obj }); });

Once the object is stored in state, I'll call it to markedDates like this.

<Calendar markedDates={this.state.marked} />

Hope it helps.

[rvmobiledev]

how to fetch dates dynamically and mark dates, can anyone please put some reference code.

This is how I did it. I fetched my dates using Axios and store all marked dates in an array. Once it's stored, I assigned the marked: true to the dates and parse it as an object. It would look something like this.

this.setState({ booking_dates: [...this.state.booking_dates, booking.booking_date] })); } }).then(() => { const obj = this.state.booking_dates.reduce( (c, v) => Object.assign(c, { [v]: { selected: false, marked: true } }), {} ); this.setState({ marked: obj }); });

Once the object is stored in state, I'll call it to markedDates like this.

<Calendar markedDates={this.state.marked} />

Hope it helps.

Its works fine to me

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.