[react-native] calendar marking 하기

react-native 에서 달력모듈을 사용하던 도중에 마킹하는 부분에서 애를 조금 먹어서 다른 분들은 그러지 않았으면 하는 바람에서 마킹하는법을 포스팅 합니다!

여기서는 하루를 선택했을때와 여러번 선택했을때 마킹하는법을 포스팅합니다.

먼저 하루를 선택하는 방법은 비교적 간단하다.

<Calendar

    onDayPress={day => {

        this.setState({

selectedDate : day.year + "-" + day.dateString.split('-')[1] + "-" + day.dateString.split('-')[2],

});

    }}

    minDate={this.state.today}

    markedDates={{

        [this.state.selectedDate]: {

            selected: true,

            marked: true,

            selectedColor: "rgb(76,174,249)"

        }

    }}

    style={styles.calendar}

/>

여기서 day.year + "-" + day.dateString.split('-')[1] + "-" + day.dateString.split('-')[2  와 같이 받은 이유는  마킹 할 때 데이터 형식이 YYYY-MM-DD 의 형식을 지켜줘야한다. 

처음에 애를 먹었던게 2019년 6월 19일 이면 2019-06-19 형태로 받았어야 했는데 나는 2019-6-19 의 형식으로 받았기 때문에 마킹이 되지않았었다. 

반드시 YYYY-MM-DD를 기억하자 !

다음은 여러 날짜를 마킹하는 방식이다.

여러날짜는 배열을 이용해서 구현하려고한다. 처리해야할 부분이 많기 때문에 함수를 하나 만든다. 

constructor(props) {

    super(props);

    this.state={

_markedDates: [],

marked: null,

    }

}

_setSelectedDates = (date) => {

    if (this.state._markedDates.length === 0) {

        this.setState({

            _markedDates: [date]

        }, () => {

            console.log(this.state._markedDates)

            let obj = this.state._markedDates.reduce((c, v) => Object.assign(c, {

                [v]: {

                    selected: true,

                    marked: true

                }

            }), {});

            this.setState({marked: obj});

        })

    }

    else {

        this.setState({

            _markedDates: this.state._markedDates.concat(date)

        }, () => {

            let obj = this.state._markedDates.reduce((c, v) => Object.assign(c, {

                [v]: {

                    selected: true,

                    marked: true

                }

            }), {});

            this.setState({marked: obj});

        })

    }

}

<Calendar

    onDayPress={(day) => {

        this.setState({

            _markedDates: day.year + "-" + day.dateString.split('-')[1] + "-" + day.dateString.split('-')[2]

        })

    }}

    minDate={this.state.today}

    markedDates={this.state.marked}

/>

이해가 안되는 부분이나 작동이 되지않는 부분이 있으면 댓글로 남겨주시면 도와드리겠습니다!