How to dynamically set marked dates from api in react-native-calendar-strip?

Question

i set marked dates using statically but don't know how to set dynamically through loop

Code:

const markedDatesArray = [

    {
      date: moment('2021-01-22', 'YYYY-MM-DD'),
      dots: [
        {
          color: COLORS.GREEN,
        },
      ],
    },

    {
      date: moment('2021-01-20', 'YYYY-MM-DD'),
      dots: [
        {
          color: COLORS.GREEN,
        },
      ],
    },
  ];



<CalendarStrip
        calendarAnimation={{type: 'sequence', duration: 30}}
        minDate={start}
        maxDate={end}
        daySelectionAnimation={{
          type: 'background',
          duration: 200,
          highlightColor: COLORS.GREEN,
        }}
        onDateSelected={(date) => console.log(date)}
        markedDates={markedDatesArray}
        style={styles.calenderStrip}
        calendarHeaderStyle={styles.calendarHeaderStyle}
        calendarColor={COLORS.WHITE}
        dateNumberStyle={styles.dateNumberStyle}
        dateNameStyle={styles.dateNameStyle}
        highlightDateNumberStyle={styles.highlightDateNumberStyle}
        highlightDateNameStyle={styles.highlightDateNameStyle}
        iconContainer={{flex: 0.1}}
        datesBlacklist={datesBlacklist}
      />

how to set dynamically, the fetching dates from api are:

["2021-02-10", "2021-02-11", "2021-02-11", "2021-02-12"]

Answer 1

Here you can do it through the loop.

Just add this loop before CalenderStripe Tag for parsing markedDates and there you go.

Solution:

let fetchedDates = ["2021-02-10", "2021-02-11", "2021-02-11", "2021-02-12"];
let markedDatesArray = [];

for (let i = 0; i < fetchedDates.length; i++) {
  markedDatesArray.push({
    date: moment(`${fetchedDates[i]}`, "YYYY-MM-DD"),
    dots: [
      {
        color: COLORS.GREEN,
      },
    ],
  });
}

<CalendarStrip
        calendarAnimation={{type: 'sequence', duration: 30}}
        minDate={start}
        maxDate={end}
        daySelectionAnimation={{
          type: 'background',
          duration: 200,
          highlightColor: COLORS.GREEN,
        }}
        onDateSelected={(date) => console.log(date)}
        markedDates={markedDatesArray}
        style={styles.calenderStrip}
        calendarHeaderStyle={styles.calendarHeaderStyle}
        calendarColor={COLORS.WHITE}
        dateNumberStyle={styles.dateNumberStyle}
        dateNameStyle={styles.dateNameStyle}
        highlightDateNumberStyle={styles.highlightDateNumberStyle}
        highlightDateNameStyle={styles.highlightDateNameStyle}
        iconContainer={{flex: 0.1}}
        datesBlacklist={datesBlacklist}
      />