javascript - react native 日历 : apply custom multi marking with popup

Question

我正在使用 react-native-calendar做我的项目。

我想这样做:当用户选择一个日期时，将出现一个弹出模式，用户最多可以选择三个事件 vacation、message、workout。例如，如果用户选择假期和消息，我希望日历中出现两个点。

到目前为止，我可以在选择日期时让弹出模式出现，但我不知道如何让这些点出现在日历中。

这是我的代码:

const vacation = {key:'vacation', color: 'red', selectedDotColor: 'blue'};
const massage = {key:'massage', color: 'blue', selectedDotColor: 'blue'};
const workout = {key:'workout', color: 'green'};

export default class CalendarsScreen extends Component {
  initialState = {
     [_today]: {disabled: false}
 }

 constructor() {
   super();

   this.state = {
     _markedDates: this.initialState,
     isOpen: false,
     isDisabledOne: false,
     isDisabledTwo: false,
     isDisabledThree: false,
   }
 }



onDaySelect = (day) => {
     const _selectedDay = moment(day.dateString).format(_format);
     let selected = true;
     if (this.state._markedDates[_selectedDay]) {
       selected = !this.state._markedDates[_selectedDay].selected;
     }
     const updatedMarkedDates = {...this.state._markedDates, ...{ [_selectedDay]: { selected } } }
     this.setState({ _markedDates: updatedMarkedDates });
  } 

  render() {

    var BContent = <Button onPress={() => this.setState({isOpen: false})} style={[styles.btn, styles.btnModal]}>X</Button>;

    return (
      <View style={{flex: 1}}>

      <View style={styles.wrapper}>

        <Calendar
            minDate={_today}
            onDayPress={this.onDaySelect}
            markedDates={this.state._markedDates}
        />

      <Modal style={[styles.modal, styles.modal3]} position={"center"} ref={"modal3"} isDisabled={this.state.isDisabled}>
        <Text style={styles.text}>vacation</Text>
        <Button onPress={() => this.setState({isDisabledOne: !this.state.isDisabledOne})} style={styles.btn}>({this.state.isDisabledOne ? "YES" : "NO"})</Button>
        <Text style={styles.text}>massage</Text>
        <Button onPress={() => this.setState({isDisabledTwo: !this.state.isDisabledTwo})} style={styles.btn}>({this.state.isDisabledTwo ? "YES" : "NO"})</Button>
        <Text style={styles.text}>workout</Text>
        <Button onPress={() => this.setState({isDisabledThree: !this.state.isDisabledThree})} style={styles.btn}>({this.state.isDisabledThree ? "YES" : "NO"})</Button>
      </Modal>

        </View>
      </View>
    );
  }
}

有人可以帮忙吗？任何建议或意见将不胜感激!

Answer 1

您需要将标记日期添加到您的 _markedDates 对象。在当天按下显示模态，当用户单击 x 时，保存标记的日期，并在点数组中选择类型。

state = {
  _markedDates: this.initialState,
  isOpen: false,
  isDisabledOne: false,
  isDisabledTwo: false,
  isDisabledThree: false,
  isOpen: false,
  selectedDay: ''
};

saveDay = () => {
  const dots = [];
  let selected = true;
  const {
    isDisabledOne,
    isDisabledTwo,
    isDisabledThree,
    _markedDates,
    selectedDay
  } = this.state;

  if (isDisabledOne) {
    dots.push(vacation);
  }

  if (isDisabledTwo) {
    dots.push(massage);
  }

  if (isDisabledThree) {
    dots.push(workout);
  }

  if (_markedDates[selectedDay]) {
    selected = !_markedDates[selectedDay].selected;
  }

  const clone = { ..._markedDates };

  clone[selectedDay] = { dots, selected };

  this.setState({
    isOpen: false,
    _markedDates: clone,
    isDisabledOne: false,
    isDisabledTwo: false,
    isDisabledThree: false,
  });
};


const BContent = () => (
  <Button
    title="X"
    onPress={this.saveDay}
    style={[styles.btn, styles.btnModal]}
  />
);

onDaySelect

onDaySelect = day => {
  const _selectedDay = moment(day.dateString).format(_format);

  this.setState({
    selectedDay: _selectedDay,
    isOpen: true
  });
};

DEMO