在 React Native Calendars 中突出显示按下（选择）的日期

Question

在我的项目中，我使用了 react-native-calendars 库。目前，我可以通过 onPress 获取日期。但问题是如何突出显示该日期。逻辑：当用户按下日期时，它应该以任何颜色突出显示。主要原因是将所选日期与其余日期区分开来。这是来源 code

这是我的代码片段，负责获取当前日期：

state={
  selectedDate: '',
}

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

Answer 1

According to the document 您需要使用 markedDates={} 来显示突出显示的日期。

<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}
  }}
/>

编辑

将markedDates添加到初始状态。

state = {
    selectedDate: "",
    markedDates: {}
};

更改 getSelectedDayEvents 函数以创建 markedDates 对象并将其分配给状态。

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

更改日历组件以接受 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);
  }}
/>

如果您有任何面团，请随时询问。希望对您有所帮助。

Answer 2

<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={
    date: moment().format("YYYY-MM-DD"),
    selected_date:null,
  }

在 React Native Calendars 中突出显示按下（选择）的日期

Highlight pressed(selected) date in React Native Calendars

javascript

highlight

reactjs

react-native