[react-native] react-native-calendars

 react-native-calendars는 React Native 애플리케이션에서 달력을 표시하고 관리할 수 있는 유용한 라이브러리이다.

 

이 라이브러리는 다양한 달력 레이아웃과 기능을 제공하여 사용자 정의 달력, 마커, 주간 달력 등을 구현할 수 있다.

 

바로 예제 코드와 함께 알아보자.

---

npm install react-native-calendars --save

yarn add react-native-calendars

 

설치가 완료되면, React Native 프로젝트에 바로 사용할 수 있다.

 

- 기본 달력 사용하기

기본 달력을 구현하는 것은 간단하다. 다음은 기본 달력을 표시하는 예제 코드이다.

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

const App = () => {
  return (
    <View>
      <Calendar
        current={'2022-03-01'}
        onDayPress={(day) => {console.log('selected day', day)}}
        monthFormat={'yyyy MM'}
        hideExtraDays={true}
        firstDay={1}
      />
    </View>
  );
};

export default App;

 

- 달력에 마커 추가하기

달력에 특정 날짜를 표시하기 위해 마커를 추가할 수 있다. 다음 코드는 마커를 사용하는 방법을 보여준다.

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

const App = () => {
  return (
    <View>
      <Calendar
        current={'2022-03-01'}
        markedDates={{
          '2022-03-15': {selected: true, marked: true, selectedColor: 'blue'},
          '2022-03-16': {marked: true},
          '2022-03-20': {marked: true, dotColor: 'red', activeOpacity: 0},
        }}
        onDayPress={(day) => {console.log('selected day', day)}}
      />
    </View>
  );
};

export default App;

 

- 커스텀 스타일링

react-native-calendars는 다양한 스타일링 옵션을 제공한다. 달력의 색상, 글꼴 및 기타 요소를 쉽게 사용자 정의할 수 있다. 예를 들어, 달력의 테마를 변경하는 코드는 다음과 같다.

<Calendar
  // Theme
  theme={{
    backgroundColor: '#ffffff',
    calendarBackground: '#ffffff',
    textSectionTitleColor: '#b6c1cd',
    textSectionTitleDisabledColor: '#d9e1e8',
    selectedDayBackgroundColor: '#00adf5',
    selectedDayTextColor: '#ffffff',
    todayTextColor: '#00adf5',
    dayTextColor: '#2d4150',
    textDisabledColor: '#d9e1e8',
    dotColor: '#00adf5',
    selectedDotColor: '#ffffff',
    arrowColor: 'orange',
    disabledArrowColor: '#d9e1e8',
    monthTextColor: 'blue',
    indicatorColor: 'blue',
    textDayFontFamily: 'monospace',
    textMonthFontFamily: 'monospace',
    textDayHeaderFontFamily: 'monospace',
    textDayFontWeight: '300',
    textMonthFontWeight: 'bold',
    textDayHeaderFontWeight: '300',
    textDayFontSize: 16,
    textMonthFontSize: 16,
    textDayHeaderFontSize: 16
  }}
/>

 

기본적인 사용법과 커스텀 예제 코드를 간단하게 알아봤는데, 달력을 표현할 때 사용하는 가장 기본적인 라이브러리이기 때문에 사용법을 숙지하도록 허자.

 

물론 언제나 Docs를 보는게 제일 쉽다.