突出显示按下(选定的)日期在React本机日历

Question

在我的项目中，我使用了react本机日历库。目前，我可以通过onPress获得约会。但问题是如何突出这一日期。逻辑:当用户按下日期时，应该以任何颜色突出显示。主要原因是要区分选定的日期和其余的日期。这是源代码

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

state={
  selectedDate: '',
}

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

Answer 1

根据文件您需要使用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}
  }}
/>

编辑

1. 将markedDates添加到初始状态。

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

1. 更改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
    });
};

1. 更改日历组件以接受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,
  }