2. [React] React로 FullCalendar 사용1 - 기본

★ FullCalendar 목차

https://dhdl-it.tistory.com/category/React/FullCalendar

'React/FullCalendar' 카테고리의 글 목록

---

안녕하세요. 오늘은 React로 FullCalendar를 연동하는 부분을 공유하고자 합니다.

 

※ 공식문서

https://fullcalendar.io/docs/react

React Component - Docs | FullCalendar

 

① React 프로젝트 생성

프로젝트 생성은 기존에 다른 프로젝트 생성과 동일합니다.

(<프로젝트 이름> 부분에는 본인의 프로젝트 이름을 작성하시면 됩니다.)

npx create-react-app <프로젝트 이름>
cd <프로젝트 이름>
npm start

 

② FullCalendar 모듈 설치

npm install --save @fullcalendar/react @fullcalendar/core @fullcalendar/daygrid

npm install style-loader css-loader sass-loader node-sass --save

 

③ FullCalendar 적용

① MyCalendar.js 파일 생성

---

② MyCalendar.js

import React, { Component } from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';

class MyCalendar extends Component {
    render() {
        return (
          <div className="App">
            <FullCalendar 
              defaultView="dayGridMonth" 
              plugins={[ dayGridPlugin ]}
            />
          </div>
        );
    }
}
export default MyCalendar;

---

③ App.js

import './App.css';
import MyCalendar from './MyCalendar';

function App() {
  return (
    <div className="App">
      <MyCalendar />
    </div>
  );
}

export default App;

 

④ 실행

npm start

실행 결과

 

⑤ 이벤트 넣기

MyCalendar.js에 events 부분 추가

import React, { Component } from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';

class MyCalendar extends Component {
    render() {
        return (
          <div className="App">
            <FullCalendar 
                defaultView="dayGridMonth" 
                plugins={[ dayGridPlugin ]}
                events={[
                    { title: 'event 1', date: '2022-09-01' },
                    { title: 'event 2', date: '2022-09-02' }
                ]}
            />
          </div>
        );
    }
}

export default MyCalendar;

실행 결과

 

---

다음 할 일

• MSSQL과 연동하기
• CSS 수정