9. [React] React로 FullCalendar 사용5 - Events 별로 다른 색상 주기

★ FullCalendar 목차

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

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

---

안녕하세요. 지난번에 Fullcalendar에 Events 띄우기를 했다면,

 

[React/FullCalendar] - 8. [React] React로 FullCalendar 사용4 - mssql 데이터 값 calendar에 보이기 (Fullcalendar에 Events 띄우기)

8. [React] React로 FullCalendar 사용4 - mssql 데이터 값 calendar에 보이기 (Fullcalendar에 Events 띄우기)

 

오늘은 띄워진 Events들에 각각 다른 색상을 부여해보겠습니다.

 

최종 결과물)

결과

 

① 쿼리 수정

이전글에서, fullcalendar에서는 title, date 외에도 start, end, color 등 다양하게 존재함을 알 수 있다고 작성했었는데요,

이때 color 를 이용할 것입니다.

조건에 따라 color를 지정만 해주면, fullcalendar에도 바로 적용됩니다.

이러한 [조건]을 지정할 때 사용하는 함수는 CASE WHEN 함수입니다.

 

▶ CASE WHEN

: 조건에 따라 값을 지정해주는 역할을 합니다.

CASE WHEN 조건절 THEN 참일때의 값 ELSE 거짓일때의 값 END 컬럼명

 

(기존에 존재하는 테이블의 UserType을 1/1/1 에서 1/2/3으로 수정했습니다)

 

CASE WHEN 함수를 이용하여 쿼리를 작성해줍니다.

 SELECT id, UserName as title, UserType, StartDate as start, CONVERT(CHAR(10),DATEADD(DAY, 1, EndDate),23) as [end],
	CASE	
		WHEN UserType = 1 THEN '#E0FFFF'
		WHEN UserType = 2 THEN '#E6E6FA'
		WHEN UserType = 3 THEN '#FFF0F5'
		ELSE '#000000'
	END AS color
FROM tblTest 
ORDER BY StartDate, UserName

 

▷ node server/server.js를 실행한 터미널을 Ctrl+z 로 종료시킨 후, 재실행해줍니다.

 

위와 같이, Events 별로 색상이 변경되었음을 알 수 있습니다.

이때, 글자 색깔이 흰색이라 잘 보이지 않는다면, 

 

eventTextColor 옵션을 지정해주면 됩니다.

 

② text 색상 변경

<FullCalendar /> 를 작성해준 페이지(MyCalendar.js)으로 가서 

eventTextColor='black'

를 작성해줍니다.

 

 

위의 과정을 모두 거치면 최종적으로 원하는 결과가 나왔음을 알 수 있습니다.

감사합니다.

 

---

☆ 전체 코드 ☆

server/server.js

const express = require('express');

const app = express();
app.listen(8088, function () {
    console.log('listening on 8088')
});

// mssql 연동
var mssql = require("mssql");
var dbConfig_user = {
    server: "",
    database: "",
    user: "",
    password: "",
    port: ,
    options: {      // DeprecationWarning: Setting the TLS ServerName to an IP address is not permitted by RFC 6066. This will be ignored in a future version. 오류 해결
        encrypt: false,
        trustServerCertificate: true,
    }  
};

mssql.connect(dbConfig_user, function(err){
    if(err){
        return console.error('error : ', err);
    }
    console.log('MSSQL 연결 완료')
});

// main - FullCalendar 화면
app.get('/main', function (req, res) {
    var conn = new mssql.ConnectionPool(dbConfig_user);

    conn.connect().then(function () {
        var req = new mssql.Request(conn);
        
        // EndDate에 +1 을 해줘야, fullCalendar에 제대로 보임. 
        // 그러나 varchar 형식이기 때문에 DATEADD 함수를 이용하여 하루를 더해주면 datetime 형식으로 변경되기에, 다시 CONVERT 함수 이용해서 varchar 형식으로 변경
        req.query(`SELECT id, UserName as title, UserType, StartDate as start, CONVERT(CHAR(10),DATEADD(DAY, 1, EndDate),23) as [end],
                        CASE	
                            WHEN UserType = 1 THEN '#E0FFFF'
                            WHEN UserType = 2 THEN '#E6E6FA'
                            WHEN UserType = 3 THEN '#FFF0F5'
                            ELSE '#000000'
                        END AS color
                    FROM tblTest 
                    ORDER BY StartDate, UserName`).then(function (events) {
            console.log('req: ', events.recordset);
            conn.close();
            res.json(events.recordset);
        })
        .catch(function (err) {
            console.log('err: ', err);
            conn.close();
            res.json(err);
        });
    })
    .catch(function (err) {
        console.log('err: ', err);
        res.json(err);
    });
});

 

MyCalendar.js

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

import axios from 'axios';

class MyCalendar extends Component {
    state = {}

    // 아래의 모든 과정은 componentDidMount에 의해, 컴포넌트가 만들어지고 첫 렌더링을 모두 끝낸 후 실행됨
    componentDidMount() {
        this._getEvents();
    }

    // _axiosEvents이 응답을 받을때까지 기다리고, 응답을 받는다면 setState 메소드를 호출하여 state 값에 events라는 데이터를 넣어줌
    _getEvents = async () => {
        const events = await this._axiosEvents();
            this.setState({
                events
        })
    }

    // axios의 get 메소드를 통해 Back-End의 '/main' url에 정보를 요청하고, 그에 따른 res.data 응답 리턴
    _axiosEvents = async () => {
        return axios.get('/main')
                    .then(res => res.data);                  
    }
    
    render() {
      let { events } = this.state;      

        return (
          <div className="calendar">
                { events ? 
                    <FullCalendar 
                        defaultView="dayGridMonth" 
                        plugins={[ dayGridPlugin ]}
                        select={ this.handleDateSelect }
                        events={ this.state.events }  
                        eventTextColor='black'  // 글자 색상
                    /> :
                    'loading...'
                }
            </div>
        );
    }
}
export default MyCalendar;