Background color day not work

I’m touching on some days in the calendar, but they are not imediately changing the background colors. It only updates the colors when I change the month back and forth.

`<Calendar current={minDate} minDate={minDate}
maxDate={maxDate}
displayLoadingIndicator onDayPress={this.onDayPress} markedDates={datesMarked} theme={{ calendarBackground: ‘#ffffff’, textSectionTitleColor: ‘#b6c1cd’, selectedDayBackgroundColor: ‘#7AD8FB’, selectedDayTextColor: ‘#ffffff’, todayTextColor: ‘#7AD8FB’, dayTextColor: ‘#2d4150’, textDisabledColor: ‘#d9e1e8’, dotColor: ‘#7AD8FB’, selectedDotColor: ‘#ffffff’, base: { width: 20, height: 20, justifyContent: ‘center’ }, text: { marginTop: 0, fontSize: 8.5, } }} hideExtraDays={true} markingType={‘interactive’} />

`

VIDEO EXAMPLE

Thanks.

[tautvilas]

Please try this:

selecionarData = (day) => {        
    const {datesMarked} = this.state;
    datesMarked =  {...datesMarked,  [day.dateString]: [{startingDay: true, color: '#42aaf4', selected: true}, {selected: true, endingDay: true, color: '#42aaf4', textColor: 'white'}]};
    this.setState({datesMarked: datesMarked})
}

Make sure that datesMarkes is not being mutated, but treated as immutable variable (so on each change it is being initialized again)

[AkshitSahani]

Hi, I’m encountering the exact same problem. The background color for the dates is not changing unless I press the left or right arrow key to change month.

<Calendar style={{marginTop: 70}} minDate={getDate()} maxDate={getDate(‘max’)} hideExtraDays={true} onDayPress={(day)=>{this.selectDate(day)}} markedDates={this.state.selectedDates} onMonthChange={(month)=>{this.nextMonth(month);}} />

selectDate = (day) => { const {tappedDates} = this.state; let updatedTappedDates = {…tappedDates}; if(updatedTappedDates[day.dateString] && updatedTappedDates[day.dateString] < 2){ updatedTappedDates[day.dateString] += 1; } else if(updatedTappedDates[day.dateString] === 2){ updatedTappedDates[day.dateString] = 0; } else{ updatedTappedDates[day.dateString] = 1; }

let color;
const calGreen = "#BFE9E6";
const calYellow = "#FBDC98";
const calRed = "#E7808D";

switch (updatedTappedDates[day.dateString]) {
  case 0:
    color = calGreen;
    break;
  case 1:
    color = calYellow;
    break;
  case 2:
    color = calRed;
    break;
  default:
    color = calGreen;
}

// const {selectedDates} = this.state;
// selectedDates = {...selectedDates, [day.dateString]: {selected: true, selectedColor: 'orange'}};
-------if i write these two lines above, based on the solution you provided to vagnerSI, I get an 
            error saying "selectedDates is read-only"-------

// const {selectedDates} = this.state;
// let newSelectedDates = {...selectedDates, [day.dateString]: {selected: true, selectedColor: 
    color}};
          ---- I tried this solution as well but not successful-------

let selectedDates = Object.assign({}, this.state.selectedDates);
selectedDates[day.dateString] = {selected: true, selectedColor: color};
this.setState({selectedDates: selectedDates});
 ------ I tried this solution as well after looking at some of your answers to other people having the 
            same problem, but this one is not successful either ----

};