[React] react-calendar

https://www.section.io/engineering-education/build-react-calendar-library/

Build a Calendar in React Using React-Calendar Library

 

react-calendar

 - React 달력 라이브러리

 

react-calendar 설치하기

1. Node.js 다운로드: https://nodejs.org/en/

Node.js

 

2. cmd에서 Node.js 버전 확인하기. 14.5.1 또는 그 이상의 버전이 요구된다.

C:\Users\renne>node --version
v16.16.0

 

3. cmd에서 npm 버전 확인하기.

C:\Users\renne>npm --version
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
8.11.0

 

4. 새로운 React 프로젝트 환경 만들기

https://coding-leo.tistory.com/51

[React] React 설치 및 개발 환경 구축

 

5. app 실행하기

https://coding-leo.tistory.com/52?category=1035897 

[React] React 샘플 웹 app 실행하기

 

6. Terminal(Ctrl + J)에서 npm start 입력

npm start

 

7. Terminal에서 npm install react-calendar 입력

npm install react-calendar

 

react-calendar 사용하기

1. src/app.js로 이동하고 기존 내용들 삭제

 

2. 아래의 코드를 붙여넣기 하고 저장

import {useState} from 'react';
import Calendar from 'react-calendar'; 
import './App.css';

function App() {
 const [date, setDate] = useState(new Date())

return (
 <div className="app">
   <h1 className="header">React Calendar</h1>
   <div className="calendar-container">
     <Calendar onChange={setDate} value={date}/>
   </div>
   <div className="text-center">
      Selected date: {date.toDateString()}
   </div>
 </div>
  )

}

export default App;

 

3. 결과

 

react-calendar CSS로 꾸미기

1. node_modules/react-calendar/dist 에서 Calender.css 찾기

 

2. Calendar.css의 코드를 App.css로 복사하기

3. 코드를 수정하며 Customizing 하기