[React 리액트] react-calendar - 캘린더 적용하기

📌 설치

✔ npm

npm install react-calendar

✔ yarn

yarn add react-calendar

 

📌 사용 방법

1. Import

import Calendar from 'react-calendar';

2. <Calendar />를 추가하고 value와 onChange를 사용한다.

 <Calendar
        onChange={onChange}
        value={value}
 />

 

📌 예시 코드

import React, { useState } from 'react';
import Calendar from 'react-calendar';

function MyApp() {
  const [value, onChange] = useState(new Date());

  return (
    <div>
      <Calendar onChange={onChange} value={value} />
    </div>
  );
}

📌 데모 확인

https://projects.wojtekmaj.pl/react-calendar/

React-Calendar

 

➕ CSS 스타일

만약 CSS 스타일을 수정하고 싶다면, 아래와 같이 import를 추가로 해야한다.

import 'react-calendar/dist/Calendar.css';

🔗 참고하기 좋은 사이트

https://stackoverflow.com/questions/60446117/how-to-mark-particular-dates-in-react-calender/60500546#60500546

How to mark particular dates in react-calender

---

🔗 출처

https://github.com/wojtekmaj/react-calendar

GitHub - wojtekmaj/react-calendar: Ultimate calendar for your React app.