Selecting a date does not highlight.

[jordzawada]

Please make our job easier by filling this template out to completion. If you're requesting a feature instead of reporting a bug, please feel free to skip the Environment and Reproducible Demo sections.

Description

When a date is "selected", date does highlight or un-highlight. Possible state update issues aren't rendering selected dates?

Expected Behavior

When I click on a date, I want the blue circle to highlight.

Observed Behavior

No change happens. Whether it has markedDates or not, and whether "selected" is true or false, it retains it's given highlghted state from initial render.

Environment

Please run these commands in the project folder and fill in their results:

• npm ls react-native-calendars: -- react-native-calendars@1.403.0
• npm ls react-native: react-native@0.62.2

Also specify:

1. Phone/emulator/simulator & version: android and web/expo cli or metro?/

Reproducible Demo

Won't work with just using <Calendar " /> (web and android)

if I add in markedDates {
"####-##-##":{marked:true, selected:true}
"####-##-##":{marked:true, selected:true}
}

it renders the dates as highlighted(blue circle), but if selected is put to false, it stays highlighted and vice-versa for when "selected" starts as false. When "marked": true/false gets changed, I can see the calendar update.

I have <Calendar
style={styles.calendar}
minDate={this.state.minDate}
onDayPress={(day) => {this.selectDate(day)}}
markedDates={this.state.availableDates}
markingType={'single'}
/>

but blocking out all the given props has no effect. The base still does not highlight.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[earnestware]

no answers? did you find a solution?

[jordzawada]

no answers? did you find a solution?

I did not.

[marcelodiegues]

I have a similar issue. When I try to update the selected day, the calendar highlight all days that I clicked, instead of changing. I resolved the issue cleaning the marked dates state that I created, before that, save it content in variable and, inside a setTimeout add in the state again. I'll paste the code above:

dayPress = (day) => {
        let varMarkedDates = markedDates // This is my state
        setMarkedDates({})
        delete varMarkedDates[`${lastDayClick}`]['selected']
        delete varMarkedDates[`${lastDayClick}`]['selectedColor']
        setTimeout(function() { 
            varMarkedDates[`${day.dateString}`] = {...varMarkedDates[`${day.dateString}`], selected: true, selectedColor: '#6de5f7'}
            setMarkedDates(varMarkedDates)
            setLastDayClick(day.dateString)
        }, 0.1)
    }