카테고리 없음

react 캘린더 사용해보기

라이언93 2019. 2. 20. 14:41

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; 


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


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


그럼이만..