React-native-calendars: Pressing a date doesn't select

[collabcoding614]

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.

Just installed a basic calendar. I didn't add anything to it.

1-2 sentences describing the problem you're having or the feature you'd like to request

Pressing on a date should select it

What action did you perform, and what did you expect to happen?

Installed. Imported basic calendar. Added to jsx.
import { Calendar } from "react-native-calendars";

What actually happened when you performed the above actions?

• When you press on a date nothing happens

If there's an error message, please paste the full terminal output and error message in this code block:

Error text goes here!

Environment

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

• npm ls react-native-calendars:
  npm WARN deprecated [email protected]: WARNING: This project has been renamed to babel-plugin-module-resolver. Install babel-plugin-module-resolver for new features
  canapp@ /Users/natedeazy/projects/cannabis-app/canapp
  └── UNMET DEPENDENCY react-native-calendars@^1.208.0

npm ERR! missing: react-native-calendars@^1.208.0, required by canapp@

• npm ls react-native:
  npm WARN deprecated [email protected]: WARNING: This project has been renamed to babel-plugin-module-resolver. Install babel-plugin-module-resolver for new features
  canapp@ /Users/natedeazy/projects/cannabis-app/canapp
  └── (empty)

Also specify:

1. Phone/emulator/simulator & version:

iphone 8 plus and iphone x simulator

Reproducible Demo

yarn add react-native-calendars
import { Calendar } from "react-native-calendars";

• Press on a date (NOTHING HAPPENS, NO HIGHLIGHTING OF DATE)

Please provide a minimized reproducible demonstration of the problem you're reporting.

Issues that come with minimal repro's are resolved much more quickly than issues where a maintainer has to reproduce themselves.

[jtweaver]

Also having this issue. It's not that onDayPress isn't registering a press, it's that current={} does nothing. Even when entering tomorrow's date into current (current={'2019-08-21'}), the date does not have any different styling and does not use the styling provided in "selectedDayBackgroundColor" or "selectedDayTextColor" (if provided).

[collabcoding614]

This has nothing to do with the programmatic functionality and attaching event handlers. It literally has only to do with the most basic functionality of this calendar. Just using plain react component

U see the calendar render and when u press on the dates it doesn't highlight what you press on the way the docs explain it. I don't get it, this is literally the most basic functionality of any calendar of ever? For this most basic operation not to work is not good. Not sure how this calendar component even exists if u cant do the basics

[nabrams]

@collabcoding614 any progress on finding a solution? I am having the same issue.

if I insert I do not see the dot either and even if I save the date on press to the local state and set the current to that date, nothing happens

[zackdotcomputer]

Also seeing this - rendering it even in its most basic form of <Calendar /> just does not appear to work at all on React Native 0.59.x? Clicking on days causes the highlight state but does not cause the "selection dot" to appear.

[jtweaver]

Figured it out. The Calendar module does not automatically select the pressed date (although I think it should). You have to provide the selected flag in the markedDates prop.

markedDates={{ [this.state.selected]: { selected: true } }}

Or, you can patch the src/calendar/index.js file and change the getDateMarking(day) to something like this:

const current = parseDate(this.props.current);
const selected = current && dateutils.sameDate(day, current)

if (!this.props.markedDates) {
  return { selected };
}

const dates = this.props.markedDates[day.toString('yyyy-MM-dd')] || EmptyArray;
if (dates.length || dates) {
  return dates;
} else {
  return { selected }
}

Make sure to provide the current prop. That way you won't have to provide the markedDates prop if you don't need it.

I'd submit a PR for this but it doesn't look like this was the intended functionality.

[collabcoding614]

@jtweaver the problem is it's advertised with this functionality out of the box

[jtweaver]

Agreed, but the documentation and example screens do show how this is done. So the advertised functionality is there if you just read the instructions. The "Basic Parameters" section of the Calendar docs should probably be updated to add this code though to prevent further confusion from people just trying to quickly get up and running.

[zackdotcomputer]

=@collabcoding614 that, since it says it will have this behavior, it should actually have it without needing to loop a selected value back in via markedDates. But, glad to have your patch to fix it @jtweaver.

I think your patch for index.js isn't quite right, though? The current prop is, in the docs, listed as:

// Initially visible month. Default = Date()

So it's the month that's shown when the calendar first loads, not the currently selected value. I think we'd need a new prop like selectedDate for that.

[usungsoft]

@jtweaver thanks for your work. i was also looking for how to deal with it, and seems like that`s the only way we could mark selected dated unless there's no exact props for selected date.

[astalarico]

This seems to happen for me, as well, but only when using an emulator, currently an android emulator ( Pixel 2). When I debug on an actual android device (Samsung Galaxy S9+) the problem isn't there.

[Muratoter]

Try stop remote JS Debugging from developer menu.

[karanwadhwa]

you could set a selectedDate key in your component state and then add it to your markedDates prop by spreading your markedDates object and adding a new object with key of the selectedDate with value {selected: true}.

this.state = {
  events: {
{"2019-12-15": { /*  blah blah blah  */ }},
{"2019-12-16": { /*  blah blah blah  */ }},
{"2019-12-17": { /*  blah blah blah  */ }}
},
  selectedDate: ""
}

<Calendar
onDayPress={day => this.setState({ selectedDate: day.dateString })}
 markedDates={{
              ...this.state.events,
              [this.state.selectedDate]: {
                ...this.state.events[this.state.selectedDate],
                selected: true
              }
            }}
/>