Question

183

Highlight pressed(selected) date in React Native Calendars

rated 0 times [ 184] [ 1] / answers: 1 / hits: 10655 / 5 Years ago, sun, january 5, 2020, 12:00:00

In the project that I have, I used react-native-calendars library. Currently, I am able to get date by onPress. But the question is how to highlight that date. Logic: when the user presses the date it should be highlighted in whatever colour. The major reason is to distinguish the selected date from the rest of the dates. This is source code

This is a snippet of my code where which is responsible for getting the current date:

state={

  selectedDate: '',

}



const getSelectedDayEvents = (date) => {

    let serviceDate = moment(date);

    serviceDate = serviceDate.format(DD.MM.YYYY);

    this.setState({selectedDate: serviceDate});

};

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

adrienkeithr

Add To Favorites

Follow

Total Points: 503

Total Questions: 126

Total Answers: 110

Location: Lithuania

Member since Fri, Sep 4, 2020

4 Years ago

adrienkeithr questions

1 How to slow down scroll to top speed?

Sat, Oct 3, 20, 00:00, 4 Years ago

1 FlatMap vs Reduce for mapping and filtering - is one recommended over the other?

Fri, Aug 21, 20, 00:00, 4 Years ago

1 In Node.js using Express, how does one have a user login along with admin login? I want users limited access with admin have access to all routes

Wed, Dec 4, 19, 00:00, 5 Years ago

1 Pointer-events: none doesn't work on mobile

Thu, Nov 28, 19, 00:00, 5 Years ago

1 What is the meaning of incremental in tsconfig.json?

Wed, Oct 9, 19, 00:00, 5 Years ago

View All

answered 5 Years ago brennonr · Accepted Answer

According to the document you need to use markedDates={} to display highlighted days.

<Calendar

  markedDates={{

    '2012-05-16': {selected: true, marked: true, selectedColor: 'blue'},

    '2012-05-17': {marked: true},

    '2012-05-18': {marked: true, dotColor: 'red', activeOpacity: 0},

    '2012-05-19': {disabled: true, disableTouchEvent: true}

  }}

/>

Edit

AddmarkedDates to the initial state.

state = {

    selectedDate: ,

    markedDates: {}

};

Change getSelectedDayEvents function to create markedDates object & assign that to state.

getSelectedDayEvents = date => {

    let markedDates = {};

    markedDates[date] = { selected: true, color: '#00B0BF', textColor: '#FFFFFF' };

    let serviceDate = moment(date);

    serviceDate = serviceDate.format(DD.MM.YYYY);

    this.setState({

        selectedDate: serviceDate,

        markedDates: markedDates

    });

};

Change Calendar component to accept markedDates

<Calendar

  style={{ height: 300, width: 90%, justifyContent: center }}

  theme={{

    backgroundColor: #ffffff,

    calendarBackground: #ffffff,

    todayTextColor: #57B9BB,

    dayTextColor: #222222,

    textDisabledColor: #d9e1e8,

    monthTextColor: #57B9BB,

    arrowColor: #57B9BB,

    textDayFontWeight: 300,

    textMonthFontWeight: bold,

    textDayHeaderFontWeight: 500,

    textDayFontSize: 16,

    textMonthFontSize: 18,

    selectedDayBackgroundColor: #57B9BB,

    selectedDayTextColor: white,

    textDayHeaderFontSize: 8

  }}

  minDate={1996-05-10}

  maxDate={2030-05-30}

  monthFormat={MMMM yyyy }

  markedDates={this.state.markedDates}

  scrollEnabled={true}

  horizontal={true}

  showScrollIndicator={true}

  disableMonthChange={true}

  onDayPress={day => {

    getSelectedDayEvents(day.dateString);

  }}

/>

If you have any dough feel free to ask. Hope this will helps you.