react-native-calendar : apply custom multi marking with popup

Question

I am using react-native-calendar to make my project.

I want to do this: When the user selects a date, a popup modal will appear and the user could select up to three events vacation, message, workout. For example, If the user selects vacation and message, I want two dots to appear in the calendar.

So far I am able to make the popup modal appear when the I pick a date, but I don't know how I could make the dots appear in the calendar.

This is my code:

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

Can anyone help? Any advise or comments would be appreciated!

Answer 1

You need to add the marked date to your _markedDates object. On day press show modal and when the user clicks x save the marked date, with selected types in dots array.

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