How can i set an array of dates inside customDatesStyles prop?

[Vasault]

I've been trying several ways, including js map, to set a list of multiple dates into a customDatesStyles, and still no clue how to colour them, my list is like this

['2020-05-11', '2020-05-12', '2020-05-13',]

[peacechen]

There is an example in the documentation: https://github.com/BugiDev/react-native-calendar-strip#customdatesstyles

Expand the "Array Usage Example" details section. The sample project in this repo also contains an example.

[Vasault]

https://github.com/BugiDev/react-native-calendar-strip#customdatesstyles

i got this code which is based on documentation, but is not working

  datesBlacklist: [] = DataManager.ListHoliday;
  customDatesStyle: any[] = [];
  startDate: any = moment();

  datesHolidaylist = () => {
    for (let index = 0; index < this.datesBlacklist.length; index++) {
      this.customDatesStyle.push({
        startDate: this.startDate.clone().add(index, 'days'), // Single date since no endDate provided
        dateNameStyle: {color: '#06a800'},
        dateNumberStyle: {color: '#06a800'},
        dateContainerStyle:  {color: '#06a800'},
      });
    }
  }

the datesBlacklist contains an array of several dates like this ['2020-05-11', '2020-05-12', '2020-05-13',]

[peacechen]

Your startDate starts on today's date, which is what moment() returns. Does today's date have the custom style? Please post your <CalendarStrip> code. Run the sample project in this repo and tweak the values to see the effect on the custom date styles.

[Vasault]

here is my CalendarStrip

          <CalendarStrip
            calendarHeaderStyle={{
              fontSize: 18,
              fontWeight: "normal",
              fontStyle: "normal",
              letterSpacing: 0,
              textAlign: "left",
              color: "#707070",
              paddingBottom: heightPercentageToDP('4.5%')
            }}
            selectedDate={this.state.selectedDate}
            onDateSelected={(date) => {
              this.setState({ selectedDate: date });
            }}
            //minDate={moment().subtract(3, 'days')}
            //maxDate={moment().add(3,'days')}
            //startingDate={moment().subtract(3, 'days')}
            useIsoWeekday={false}
            style={{paddingTop: heightPercentageToDP('1.5%'), paddingBottom: heightPercentageToDP('2.7%'), backgroundColor: '#f1f1f1'}}
            highlightDateNameStyle={{color: '#1062cc'}}
            highlightDateNumberStyle={{color: '#1062cc'}}
            disabledDateNumberStyle={{color: '#f21927'}}
            disabledDateNameStyle={{color: '#f21927'}}
            customDatesStyles={this.customDatesStyle}
            dateNameStyle={{color: '#c4c4c4'}}
            dateNumberStyle={{color: '#c4c4c4'}}
            disabledDateOpacity={1}
          />

and yeah, i just noticed that not even today's day has the custom style

[peacechen]

It's hard to say what's going on without seeing your entire app. datesHolidayList is a function, is it called anywhere?

Copy the entire body of the example app over your app to test the code. https://github.com/BugiDev/react-native-calendar-strip/blob/master/example/App.js

Usage questions should be posted on forums such as StackOverflow. This area is for reporting bugs and requesting features.