react 캘린더 사용해보기

react 캘린더 사용해보기

리액트 개발중 캘린더에 표시해서 보여줄 경우 유용한 라이브러리 빅캘린더 입니다.

node, yarn 설치되어 있으면 되네여..

빅캘린더 사용할 아래 2개 라이브러리까지 총 3개 과감히 설치합니다. 

yarn add react-big-calendar moment date-arithmetic

npx create-react-app react_bigCalendar

cd react_bigCalendar 들가서

에디터로 open : 전 VSC 써서 열었습니다.

sample01.js 신규파일 생성후

아래처럼 코드 넣어줍니다.

import React from "react"; import BigCalendar from "react-big-calendar"; import moment from "moment"; import "react-big-calendar/lib/css/react-big-calendar.css"; moment.locale("en-GB"); BigCalendar.momentLocalizer(moment); /* new Date(); new Date(value); new Date(dateString); new Date(year, monthIndex[, day[, hour[, minutes[, seconds[, milliseconds]]]]]); monthIndex는 0부터 시작합니다. 0은 1월을 의미하고, 11은 12월을 의미 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date */ const Sample01 = () => ( <div style={{ height: 500 }}> <BigCalendar events={[ { title: "02.20 출근", allDay: false, start: new Date(2019, 1, 20, 10, 0), // 10.00 AM end: new Date(2019, 1, 20, 10, 30) // 2.00 PM }, { title: "02.20 퇴근", allDay: false, start: new Date(2019, 1, 20, 17, 30), // 10.00 AM end: new Date(2019, 1, 20, 17, 40) // 2.00 PM } ]} step={60} view="month" views={["month"]} min={new Date(2008, 0, 1, 8, 0)} // 8.00 AM max={new Date(2008, 0, 1, 17, 0)} // Max will be 6.00 PM! date={new Date(2019, 1, 20)} /> </div> ); export default Sample01;

이제 시작파일은app.js에서 위 sample01.js 호출해주면 되네여.

import React, { Component } from "react"; import "./App.css"; import Sample01 from "./sample01"; class App extends Component { render() { return ( <div className="App"> <Sample01 /> </div> ); } } export default App;

하하 큰 달력이 비교적 쉽게 나오네여.

아래 캘린더에 일정까지 그럴듯하쥬..ㅎㅎ 저만 기쁜가보네여...

그럼이만..