TIL: RN | react-naitve-calendar 와 day.js

day.js 를 설치하면 tsconfig 설정을 해줘야 한다

"compilerOptions": {
	"esModuleInterop": true,
    "allowSyntheticDefaultImports": true
}

import * as dayjs from 'dayjs' 로 사용해도 된다면
tsconfig 설정을 해주지 않아도 된다

const [date, setDate] = React.useState(dayjs());

const plusMonth = () => {
	setDate(date.add(1, 'month'))
}

const minusMonth = () => {
	setDate(date.add(-1, 'month'))
}


<Calendar
	initialDate={date.format('YYYY-MM-DD')}
    hideArrows
    renderHeader={() => {
    return <View />;
    }}
    markedDates={markedDates}
    theme={{
    selectedDayBackgroundColor: '#009688',
    arrowColor: '#009688',
    dotColor: '#009688',
    todayTextColor: '#009688',
    }}
/>

initialDate 에 state 의 날짜를 string 형식으로 넣어주고
date 를 변경하면 달력이 해당 날짜에 맞게 변한다

custom 을 하기 위해 renderHeader 에 빈 View 를 주고
hideArrows 속성을 true 로 주었다