React-native-calendars: onDayPress not highlighting day

Created on 2 Jul 2018 · 7Comments · Source: wix/react-native-calendars

Description

onDayPress not highlighting day. If I click on a day, the day is not highlighted

Expected Behavior

Selected day should be highlighted (blue background for example)

Observed Behavior

onDayPress is called but day is not highlighted

Environment

[email protected]
[email protected]

Reproducible Demo

This is the code of the calendar:

<Calendar
      current = {(this.state.booking_date) || this.state.min_date}
      minDate={this.state.min_date}
      maxDate={this.state.max_date}
      onDayPress={(day) => this.onChangeDate(day)}
      monthFormat={'MMMM yyyy'}
      onMonthChange={(month) => {log('month changed', month)}}
      hideExtraDays={true}
      firstDay={1}
 />

I get the same behaviour even if I take off onDayPress function or If I copy example code.

Source

giacomok

👍11

Most helpful comment

+1 , onDayPress not work backgroundColor selected

UPDATE
need add markedDates =>
markedDates={{[this.state.selected]: {selected: true, disableTouchEvent: true, selectedDotColor: 'orange'}}}

solved

herarya on 25 Aug 2018

🎉4 🚀3 ❤3

All 7 comments

Same for me...
Changing the relevant theme properties does not help neither.

pelmered on 16 Jul 2018

same

Return-1 on 1 Aug 2018

can confirm this

lucidlemon on 6 Aug 2018

Any updates on this topic? I am facing the same problem. Found out that removing markedDates somehow allows the selected day to be highlighted properly. Could not figure out what is the actual issue.

[UPDATE]
I fixed this issue by setting a "selected" rule for marked dates. What I needed was to keep all the dates disabled, except for my marked dates, which are defined on the server as an array of isoWeekdays.

Here is a snippet of how my marked dates object looks like:
markedDates[day.format('YYYY-MM-DD')] = { // day is a moment() object disabled: false, marked: true, selected: this.state.selectedDay === day.format('YYYY-MM-DD'), dotColor: 'green' }