DB의 데이터를 Fullcalendar에 출력하기

 

네 줄 요약
- 결재완료된 데이터를 Fullcalendar에 출력
-  Ajax로 결재완료된 데이터를 Controller에 요청 및 받아옴
- Controller에서 JSONObject와 JSONArray를 이용해 데이터 처리 후 클라이언트에 전달
- 받아온 Json데이터를 events에 그대로 입력

기능 추가 배경
- 동일 부서 내 인원간 연차, 반차 스케쥴을 확인하기 위해 달력에 결재 완료된 기안문을 출력하기로 결정

 

 

 

 

Fullcalendar 코드

---

Fullcalendar 랜더링 전에 Ajax를 이용해 DB데이터를 Controller에 요청

요청이 완료되면 가져온 데이터를 events 에 입력하면 완료!

    <script>

        document.addEventListener('DOMContentLoaded', function() {

            $(function () {

                // DB에 결재완료된 기안문 가져오기
                var request = $.ajax({
                    url: "/board/findall.do", // 변경하기
                    method: "GET",
                    dataType: "json"
                });

                request.done(function (data) {

                    //console.log(data); // log 로 데이터 찍어주기.
                

                    var calendarButton = document.getElementById('calendarButton');
                    var calendarEl = document.getElementById('calendar');
                
                    var calendar = new FullCalendar.Calendar(calendarEl, {
                        editable: false,
                        selectable: false,
                        businessHours: true,
                        dayMaxEvents: true, // allow "more" link when too many events

                        // 가져온 기안문 정보 event에 넣기  형태 => [ { key : value }, { key : value }]
                        events: data
                        
                        });
                    <!-- 랜더링 에러 해결방법 : 랜더링 시점 조정 -->
                    calendarButton.addEventListener('click', e => {
                        setTimeout(() => {calendar.render()}, 1);
                    });
                    
                });
        
       
          });
        });

    </script>

 

 

 

CalendarDTO 코드

---

기존 Board domain으로 조인 쿼리문을 받아올 필드가 적절하지않아 DTO를 생성(right join으로 userName 필드가 추가되어야했음)

package com.jun.DowooriVer2.DTO;


import lombok.Data;

import javax.persistence.Entity;
import javax.persistence.Temporal;
import javax.persistence.TemporalType;
import java.util.Date;

@Data
public class CalendarDTO {

    private String title;
    @Temporal(TemporalType.DATE)
    private Date startDate;
    @Temporal(TemporalType.DATE)
    private Date endDate;
    private String userName;

    private String ampm;

    public CalendarDTO(String title, Date startDate, Date endDate, String userName, String ampm) {
        this.title = title;
        this.startDate = startDate;
        this.endDate = endDate;
        this.userName = userName;
        this.ampm = ampm;
    }



}

 

 

Repository 코드

---

동일 부서내 결재완료된 데이터만 조회하기위해 right join을 이용해 조회하였고, CalendarDTO를 이용해 결과값과 매핑했음.

 /**
     * 부서원 기안문 전체 조회
     */
    @Override
    @Transactional(readOnly = true)
    public List<CalendarDTO> findAllByDept(Long deptNum) {

        String jpql  = "SELECT NEW com.jun.DowooriVer2.DTO.CalendarDTO(b.title, b.startDate, b.endDate, m.userName, b.ampm)" 
        + "FROM Board b RIGHT JOIN b.member m ON b.empNum = m.empNum WHERE b.status = '결재완료' AND b.deptNum = :deptNum";

        List<CalendarDTO> boards = em.createQuery(jpql, CalendarDTO.class).setParameter("deptNum", deptNum).getResultList();

        return boards;
    }

 

 

 

Controller 코드

---

Repository 에서 조회된 boards를 JSONArray 형태로 반환해주어야함(Fullcalendar events가 JSONArray 타입 이기때문)

 

1) HashMap을 이용해 {key : value} 형태로 데이터 타입 수정

2) JSONObject를 이용해 HashMap을 JSON화 해줌

3) JSONArray를 이용해 [{key : value}, {key : value}] 구조로 수정

 

    @GetMapping("/board/findall.do")
    public List<Map<String, Object>> finadAllBoard(HttpServletRequest request) {

        /** Session을 이용해 로그인 회원정보 가젹오기 **/
        HttpSession session = request.getSession(false);
        Member loginMember = (Member) session.getAttribute(SessionConst.LOGIN_MEMBER);

        List<CalendarDTO> Boards = boardService.findAllByDept(loginMember.getDeptNum());

        // HashMap으로 저장된 데이터를 JSON으로 변환할 수 있는 라이브러리
        // 사용방법 1) : JSONObject jsonObj = new JSONObject(hashMap);
        // 사용방법 2) : JSONObject jo = new JSONObject("{\"city\":\"Seoul\",\"name\":\"Jone\"}");
        JSONObject jsonObj;

        // Jsonarray 구조 : [{key : value}, {key : value}]
        // 배열 구조이며, 문자열, 숫자, 배열, 객체 등을 담을 수 있다.
        JSONArray jsonArr = new JSONArray();

        // HashMap : map collection으로 MAp 인터페이스를 상속받음
        // Key, value 모두 객체임
        // put으로 데이터 입력, get(key)로 value 출력함
        HashMap<String, Object> hash = new HashMap<>();

        for (int i = 0; i < Boards.size(); i++) {

            hash.put("title", Boards.get(i).getUserName() + " " + Boards.get(i).getTitle());

            if (Boards.get(i).getTitle().equals("반차") && Boards.get(i).getAmpm().equals("오전")) {
                hash.put("start", Boards.get(i).getStartDate() + "T08:00:00");
                hash.put("end", Boards.get(i).getEndDate() + "T12:00:00");
            } else if (Boards.get(i).getTitle().equals("반차") && Boards.get(i).getAmpm().equals("오후")) {
                hash.put("start", Boards.get(i).getStartDate() + "T13:00:00");
                hash.put("end", Boards.get(i).getEndDate() + "T17:00:00");
            }else {
                hash.put("start", Boards.get(i).getStartDate());
                hash.put("end", Boards.get(i).getEndDate());
            }

            // hashmap을 JSON화하기
            jsonObj = new JSONObject(hash);

            // Array형태로 만들기 => [ {key : value}, {key : value} ]
            jsonArr.add(jsonObj);
        }
        log.info("jsonArrCheck: {}", jsonArr);
        return jsonArr;

    }

 

 

 

 

* 참고 블로그

 

JSONObject와 JSONArray의 차이와 전반적인 JSON형식에 대한 이야기

 

full-calendar라이브러리에 DB연동

 

[팀프로젝트] Springboot Ajax fullcalendar db 연동하기