[react native] react-native-calendars 캘린더에 마킹하기

 

 

 

import { Calendar } from 'react-native-calendars';

export default () => {


  const [markedDates, setMarkedDates] = React.useState(null);
  const [dates, setDates] = React.useState(['2021-01-05', '2021-01-20']);

  function addDates() {
    let obj = dates.reduce(
      (c, v) =>
        Object.assign(c, {
          [v]: { marked: true, dotColor: 'red' },
        }),
      {},
    );
    console.log(obj);
    setMarkedDates(obj);
  }
  
  return (
  <>
  <View>
  	<Calendar
		onDayPress={(day) =>{
        	addDates();
        }}
		markedDates={markedDates}
    />
  </View>
  </>
  )

}

 

 

캘린더에 있는 날짜 아무거나 클릭 했을 때 addDates() 를 호출해서

2021-01-05 와 2021-01-20 날짜에

빨간색 마킹이 되도록 해봤다

 

저 dates state 만 관리해주면

유동적으로 바뀐다

더 자세한 사용법은

github.com/wix/react-native-calendars

wix/react-native-calendars