7.5.1 달력에 표시하기

지금은 달력에 아무런 표시도 없습니다. 앞으로 사용자가 달력에서 특정 날짜를 선택해 해당 날짜에 작성된 로그를 조회할 수 있는 기능을 구현해볼 것입니다. 이 기능을 구현하기 위해 사용자가 현재 선택한 날짜, 로그를 작성한 날짜에 특별한 표시를 해주겠습니다. 추가로 달력에 사용되는 색상들도 변경해보겠습니다.

components/CalendarView.js

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

function CalendarView() {
  // 현재 연/월 사용하기
  const markedDates = {
    '2021-05-17': {
      selected: true,
    },
    '2021-05-18': {
      marked: true,
    },
    '2021-05-19': {
      marked: true,
    },
  };
  return (
    <Calendar
      style={styles.calendar}
      markedDates={markedDates}
      theme={{
        selectedDayBackgroundColor: '#009688',
        arrowColor: '#009688',
        dotColor: '#009688',
        todayTextColor: '#009688',
      }}
    />
  );
}

const styles = StyleSheet.create({
  calendar: {
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
});

export default CalendarView;