Highlight selected date in React Native Calendars

Programming
, , ,
1

I need to highlight the selected date on the calendar. How can I do this using the react-native-calendars library?

I am using the react-native-calendars library in my project. I am able to get the selected date using the onPress handler, but I need to highlight the selected date to distinguish it from the other dates. Here is a snippet of my code where I’m getting the selected date:

state={
  selectedDate: '',
}

const getSelectedDayEvents = (date) => {
    let serviceDate = moment(date);
    serviceDate = serviceDate.format("DD.MM.YYYY");
    this.setState({selectedDate: serviceDate});
};

How can I highlight the selected date using the react-native-calendars library?

2

To highlight the selected date on the calendar using the react-native-calendars library, you can pass a markedDates prop to the Calendar component with the selected date as a key and an object with the selected property set to true as the value. Here is an example:

state={
  selectedDate: '',
  markedDates: {}
}

const getSelectedDayEvents = (date) => {
    let serviceDate = moment(date);
    serviceDate = serviceDate.format("YYYY-MM-DD");
    this.setState({
        selectedDate: serviceDate,
        markedDates: {
            [serviceDate]: {selected: true}
        }
    });
};

<Calendar
    markedDates={this.state.markedDates}
    onDayPress={(day) => getSelectedDayEvents(day.dateString)}
/>

In this example, markedDates is a state variable that is initially an empty object. When a date is selected, the getSelectedDayEvents function updates the state with the selected date as a key and an object with the selected property set to true as the value. This state variable is then passed as the markedDates prop to the Calendar component. The selected date will be highlighted on the calendar with a default blue color.