CODEWITHSUNDEEP
javascriptreactjsreact-nativehighlight
Jasur Kurbanov
Jasur Kurbanov

Reputation: 830

Highlight pressed(selected) date in React Native Calendars

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});
};

Upvotes: 6

Views: 15265

Answers (3)

naveed ahmed
naveed ahmed

Reputation: 470

Try the following:

    const [date,setDate]=useState<any>()
    
    <Calendar
         markedDates={{
          [date]: {selected: true,selectedColor:'red',
          disableTouchEvent: true,
          selectedTextColor: 'orange'
        },
          
              }}
          onDayPress={day => {
            console.log('selected day', day);
            setDate(day.dateString)
          }}
/>

Upvotes: 0

Naved Khan
Naved Khan

Reputation: 1947

<Calendar
minDate={this.state.date}
onDayPress={(day) =>  this.setState({selected_date: day.dateString})}
renderArrow={(direction) =>  direction == 'left' ? <IconContainer iconObject={LEFT_ICON}  /> : <IconContainer iconObject={RIGHT_ICON}  />}
markedDates={{
  [this.state.selected_date]: {
    selected: true,
    disableTouchEvent: true,
    selectedColor: '#F1EFFE',
    selectedTextColor: '#7954FA',
  },
}}
theme={{
  todayTextColor: '#7954FA',
'stylesheet.calendar.header': {
  dayHeader:{
    color:'#616061',
    fontWeight:'bold'
  }
}
}}
/>

state: --

state={
    date: moment().format("YYYY-MM-DD"),
    selected_date:null,
  }

Upvotes: 3

SDushan
SDushan

Reputation: 4631

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

  1. AddmarkedDates to the initial state.
state = {
    selectedDate: "",
    markedDates: {}
};
  1. 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
    });
};
  1. 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.

Upvotes: 11

Related Questions