[React] React로 FullCalendar 사용하는 방법

1. React에서 FullCalendar를 사용할 때 필요로 한 모든 npm 설치

---

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

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

 

모든 모듈의 설치가 끝났으면 FullCalendar를 적용시키자.

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



class MyCalendar extends Component {

    constructor(props){
        super(props);
    }

    render(){
        return(
            <div className='mypage-body'>
                    <div className='body-wrapper box'>
                        <div className='body-info-container'> 
                           <div className='calendar-wrapper'>
                                <FullCalendar defaultView="dayGridMonth" plugins={[ dayGridPlugin ]} />
                           </div>
                        </div>
                    </div>
            </div>
        );
    }
}



export default MyCalendar;

 

css를 적용하지 않으면 위와 같이 글만 나오게 된다. 

2. CSS 적용

---

css를 적용시키기 위해서는 node_module안에 있는 css 파일을 불러와야한다.

 

 

node_module안의 css를 적용시키기 위해서는 먼저 scss 파일을 만들어야한다. 

 

 

scss파일 안에 아래의 내용으로 css파일을 불러온다.

@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';

'~'가 포함되어 있는 경우가 node_modules에서 파일을 불러오는 것이다.

 

mycalendar.scss를 js본문에 적용하면 모든 css 적용이 끝난다.

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

import '../../resources/mypage/css/mycalendar.scss';


class MyCalendar extends Component {

    constructor(props){
        super(props);
    }

    render(){
        return(
            <div className='mypage-body'>
                    <div className='body-wrapper box'>
                        <div className='body-info-container'> 
                           <div className='calendar-wrapper'>
                                <FullCalendar defaultView="dayGridMonth" plugins={[ dayGridPlugin ]} />
                           </div>
                        </div>
                    </div>
            </div>
        );
    }
}



export default MyCalendar;

 

 

이로써 기본 FullCalendar 설정이 끝난다. npm start로 확인을 하면 아래와 같이 나온다.