mark multiple dates dynamically react native wix

Question

I'm using react-native-calendars. This library provides ability to mark dates on the calendar once mark parameter is passed to calendar object. I tried passing an array of objects but didn't worked sending multiple dates as below didn't worked as well.

How to dynamically mark multiple dates on it?

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}
   };

this.state(
{
mark: mark,
})

          <Calendar
      onDayPress={this.onDayPress}      
      current={new Date()}
      minDate={'2018-05-24'}
      onMonthChange={(month) => {console.log('month changed', month)}}
      hideArrows={false}
      hideExtraDays={true}
      disableMonthChange={false}
      firstDay={1}
      hideDayNames={false}
      showWeekNumbers={false}
      onPressArrowLeft={substractMonth => substractMonth()}
      onPressArrowRight={addMonth => addMonth()}
      markedDates={this.state.mark}

          theme={{
            backgroundColor: '#ffffff',
            calendarBackground: '#ffffff',
            textSectionTitleColor: '#b6c1cd',
            selectedDayBackgroundColor: '#00adf5',
            selectedDayTextColor: '#ffffff',
            todayTextColor: '#00adf5',
            dayTextColor: '#2d4150',
            textDisabledColor: '#d9e1e8',
            dotColor: '#00adf5',
            selectedDotColor: '#ffffff',
            arrowColor: 'orange',
            monthTextColor: 'blue',
            textMonthFontWeight: 'bold',
            textDayFontSize: 16,
            textMonthFontSize: 16,
            textDayHeaderFontSize: 16
          }}
    />

Answer 1

There is one hack to create an object you wanted to create from the date array,

Option is using reduce to convert the array into an object and just follow the code i have implemented using pure javascript

---

Call function after you successfully get value in nextDay array

constructor(props){
    super(props);
    this.state = {
        marked: null,
    };
}
componentDidMount() {
    this.anotherFunc();
}

// call function after you successfully get value in nextDay array

anotherFunc = () => {
    var obj = nextDay.reduce((c, v) => Object.assign(c, {[v]: {selected: true,marked: true}}), {});
    this.setState({ marked : obj});
}

Now add this state to your calendar element

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

See the question I have asked for the same on SO

Answer 2

This is how I did it and it worked :

const nextDate = [
  '2021-06-28',
  '2021-06-29',
  '2021-07-04',
  '2021-07-5',
  '2021-09-06',
  '2021-08-05',
];

let mark = {};

nextDate.forEach(day => {
  mark[day] = {
    marked: true,
  };
});

Then Put the mark Object inside the markedDates in the Calendar

markedDates={mark}

Make sure the dates are in object structure