react-native-calendars 커스텀 헤더 만들기

현재 진행하는 프로젝트에서 캘린더를 만들어보기로 했다.

캘린더를 직접 만들어 사용하려고 했지만 시간이 오래 걸릴 것 같아, react-native-calendars 패키지를 사용하였다.

https://github.com/wix/react-native-calendars

커스텀 헤더 작업하기

우선 컴포넌트에서 custom할 수 있는지 확인했다.

renderHeader나 customHeaderTitle, customHeader과 같은 속성이 있었지만 헤더의 화살표 위치가 고정되어있기도 했고 파라미터의 타입을 정확히 알지 못해 사용할 수가 없었다. 그래서 컴포넌트 위에 헤더를 직접 만들기로 하였다.

(기존 디자인)

(내가 작업해야할 디자인)

처음에는 단순하게 화살표에 arrow function을 붙이려고 했지만 month를 직접 넣어나 밖으로 가져오는 방법이 없어 다른 방법을 사용하고자 한다.

현재 날짜(date)에 month를 + 1 또는 -1 하여 날짜를 바꾸어 적용하였다.
(에러가 있을것 같지만 나중에 해결하기로 한다)

이때 current가 아닌 key에 date를 넣어야 화살표가 정상적으로 작동한다.

key={date.toISOString().split('T')[0]}

key에 대한 설명이 없어서 (내가 못본 걸지도 ^^;) 찾느라 한참 걸렸는데 덕분에 외부에서도 날짜를 바꿀 수 있었다. (구글 이슈 참고)

개인적으로 파라미터에 뭐가 들어있는지 꼭 써줬으면 좋겠다. 구글링으로 하나씩 찾는거 너무 힘들다 🥲

완성된 캘린더

customHeader에 children 없는 View를 주고 hideDayNames를 하면 헤더와 요일이 전부 깨끗하게 없어져 내 헤더를 위에 붙이면 된다.

<View style={styles.calendarHeader}>
  <View style={styles.blank} />
  <View style={styles.header}>
    
    /*현재 날짜에서 month만 1 줄이기*/
    <TouchableOpacity
      onPress={() =>
  		setDate(new Date(date.setMonth(date.getMonth() - 1)))
              }>
      <customIcons.GoBack color="#242424" width="24" height="24" />
    </TouchableOpacity>
    
    /* Month 표시 (title) */
    <Text style={styles.month}> {date.getMonth() + 1}월</Text>
    
    /* 현재 날짜에서 month만 1 늘이기 */
    <TouchableOpacity
      onPress={() => {
        setDate(new Date(date.setMonth(date.getMonth() + 1)))
            }}>
      <customIcons.GoForward />
    </TouchableOpacity>
    
  </View>
  
  /* 현재 날짜로 돌아가는 아이콘 */
  <TouchableOpacity
    onPress={() => setDate(new Date())}
    style={styles.goToday}>
    <customIcons.Back />
  </TouchableOpacity>
  
</View>

/* 요일 부분 */
<View style={styles.dayHeader}>
  {WEEKS.map(day => (
    <View key={day}>
      <Text style={styles.dayName}>{day}</Text>
    </View>
  ))}
</View>

/* 캘린더 부분 */
<Calendar
  key={date.toISOString().split('T')[0]}
  onDayPress={date => setSelectedDate(new Date(date.dateString))}
  markedDates={marked}
  markingType="custom"
  theme={CalendarTheme}
  customHeader={() => <View></View>}![](https://velog.velcdn.com/images/chaeyun-sim/post/08005a51-7a23-4b45-87d5-57bbbdd33acc/image.png)

  hideDayNames
  calendarWidth={WIDTH}
  hideExtraDays={false}
/>