#12. React - 달력 화면 만들기

Inkyung·2022년 12월 14일

JAVASCRIPTS React TIL 리액트

모바일프로그래밍

목록 보기

12/12

📅 달력 화면 만들기

필요한 라이브러리

기말 과제로 달력 조회 화면을 만들기로 했다!

https://wix.github.io/react-native-calendars/docs/intro

react-native-calendars 라는 라이브러리가 있어서 가져다 쓰기로 하고 우선 필요한 것들 설치
date-fns는 날짜를 표시하기 위해 필요한 라이브러리이다. format을 import해와야하기 때문!

npm install --save react-native-calendars
npm install date-fns

기본 structure

기본적인 화면은 이렇게 구성한다

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

const CalendarView = (props) => {


  return (
    <View style = {{marginTop: 100}}>
      <Calendar/>
    </View>
  )
}

export default CalendarView;

그리고 MainTabNavigator에도 스크린 추가해서 연결해주면

import CalendarView from '../screens/CalenderView';

 <Nav.Screen name = "Calendar" component={CalendarView} options={{title: 'Calendar'}}/>

✨✨✨짜잔✨✨✨
새로운 탭이 생기면서 화면 전환이 된다!!

일정 추가

일정이 있거나 특별한 날에 마킹을 추가하고 theme의 Props를 통해 색을 바꿀 수 있다

시험이 있는 날과 내 생일에 추가를 해보기


const markedDates = {
    '2022-12-01': { selected: true },  // 내 생일ㅎㅎ
    '2022-12-15': { marked: true },
    '2022-12-16': { marked: true },
    '2022-12-19': { marked: true }
  }
  return (
    <Calendar 
      style={styles.calendar} 
      markedDates={markedDates}
      theme={{
        selectedDayBackgroundColor: 'red',
        arrowColor: 'blue',
        dotColor: 'green',
        todayTextColor: 'yellow',
      }} />
  );

onPress - selectedDay 연결

선택된 날짜에 마킹 표시를 하고 화면에 표시해보기
먼저 const로 선언을 해준다


const [selectedDate, setSelectedDate] = useState(format(new Date(), "yyyy-MM-dd"));

const markedSelectedDates = {
    ...markedDates,       // 기존의 markedDate
    [selectedDate]: {
      selected: true,
      marked: markedDates[selectedDate]?.marked,
    }
  }

그리고 view에 onDayPress => 로그 찍기, 날짜 선택을 하면 이렇게 나온다

<View>
     <Calendar style={styles.calendar} 
       markedDates={markedSelectedDates}
       theme={{
         selectedDayBackgroundColor: 'red',
         arrowColor: '#009688',
         dotColor: '#009688',
         todayTextColor: '#00adf5'
       }} 
       onDayPress={(day) => {
         console.log('selected day', day),       // 선택된 날짜 log 찍기
         setSelectedDate(day.dateString)        // 선택된 날짜 marked
       }} 
     />
     <Text style={styles.text}>{ selectedDate } </Text>        
   </View>