Background color day not work

[vagnerSl]

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]

Hi, can you paste code of onDayPress ?

[vagnerSl]

onDayPress(day) { this.props.selecionarData(day); }

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

[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)

[vagnerSl]

thanks !

[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 ----

};