How to set multiple selected date colors in react native calendars?

Question

I am using react-native-calendars in my project.I am trying to select multiple dates and trying to change its colors.When I consoled the selected dates I'm getting the selected dates. But I am not able to change its color.Any help is really appreciable thank you.Following is my code

Calendar.js

  selectDate(day) {
        let selectedDate = day.dateString;
        if (this.state.dates[selectedDate]) {
          const newDates = this.state.dates;
          delete newDates[selectedDate]
          this.setState({ dates: newDates });
        } else {
          const newDates = this.state.dates;
          newDates[selectedDate] = [
            { selected: true, startingDay: true, color: '#05A081' },
            { selected: true, endingDay: true, color: '#05A081' },
          ]
          this.setState({ dates: newDates });
          console.log("NEW_ARRAY", this.state.dates);
        }
      }
   ....

    <CalendarList
              minDate={Date.now()}
              pastScrollRange={24}
              futureScrollRange={24}
              markingType={'period'}
              onDayPress={(day) => this.selectDate(day)}
              markedDates={this.state.dates}
            />

Following is the console result

NEW_ARRAY 
{2019-09-03: Array(2), 2019-09-04: Array(2), 2019-09-05: Array(2)}
2019-09-03: Array(2)
0: {selected: true, startingDay: true, color: "#05A081"}
1: {selected: true, endingDay: true, color: "#05A081"}
length: 2
2019-09-04: (2) [{…}, {…}]
2019-09-05: (2) [{…}, {…}]

score 0 · Answer 1 · answered Aug 30 '19 at 12:42

You can change colors like this. Also, please give the documentation a review.

selectDate(day) {
        let selectedDate = day.dateString;
        if (this.state.dates[selectedDate]) {
          const newDates = this.state.dates;
          delete newDates[selectedDate]
          this.setState({ dates: newDates });
        } else {
          const newDates = this.state.dates;
          newDates[selectedDate] = [
            { selected: true, startingDay: true, color: 'yourColorHere' }, //change color here
            { selected: true, endingDay: true, color: 'yourColorHere' },//change color here
          ]
          this.setState({ dates: newDates });
          console.log("NEW_ARRAY", this.state.dates);
        }
      }
   ....

    <CalendarList
              minDate={Date.now()}
              pastScrollRange={24}
              futureScrollRange={24}
              markingType={'period'}
              onDayPress={(day) => this.selectDate(day)}
              markedDates={this.state.dates}
            />

score 0 · Answer 2 · answered Nov 19 '20 at 06:25

0

  const selectDate=(day)=> {
    let selectedDate = day.dateString;
    let newDates = dates;
    if (dates[selectedDate]) {
      delete newDates[selectedDate]
    } else {
      
      newDates[selectedDate]={selected: true, marked: true, selectedColor: Colors.YELLOW};
      
      
    }
    setdates({...newDates})
  }

answered Nov 19 '20 at 06:25

user14666863

1

Thank you for this code snippet, which might provide some limited, immediate help. A [proper explanation](https://meta.stackexchange.com/q/114762/349538) would greatly improve its long-term value by showing why this is a good solution to the problem and would make it more useful to future readers with other, similar questions. Please [edit] your answer to add some explanation, including the assumptions you’ve made. – jasie Nov 19 '20 at 06:48

How to set multiple selected date colors in react native calendars?

2 Answers2