FullCalendar 캘린더 db 일정 조회하기

1.  개발환경

1. 다운로드

  > Javascript Full Calendar 홈페이지 : https://fullcalendar.io

  > Javascript Full Calendar Scheduler : https://fullcalendar.io/docs/premium

 

FullCalendar - JavaScript Event Calendar

 

2. FullCalendar 기본 세팅

1. FullCalendar 기본 템플릿 설정

document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth' // 캘린더 기본 view 설정
        });
        calendar.render();
      });

2. calendar.jsp

<div class="calendar">
    <div id="calendar"></div>
</div>

3. 이벤트 등록

- 가장 기본적인 이벤트 등록 형식

var calendar = new Calendar(calendarEl, {
  events: [
    { 
      title: 'Title', // 제목
      start: '2022-03-03', // 시작일자
      end: '2022-03-03' // 종료일자
    }
  ]
})

- 다중등록할 시 사용되는 형식

var calendar = new Calendar(calendarEl, {
  events: [
    { 
      title: 'Title1', // 제목
      start: '2022-03-03', // 시작일자
      end: '2022-03-03' // 종료일자
    },
    { 
      title: 'Title2', // 제목
      start: '2022-03-05', // 시작일자
      end: '2022-03-05' // 종료일자
    },
    { 
      title: 'Title3', // 제목
      start: '2022-03-06', // 시작일자
      end: '2022-03-06' // 종료일자
    }
  ]
})

 

 

db에 있는 일정들을 json 데이터를 ajax 형식으로 받아오기로 함

 

$(function(){
    var request = $.ajax({
        url: "/ticketPlan",
        method: "GET",
        dataType: "json"
    });

    request.done(function( data ) {
        console.log(data);

            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
              initialView: 'dayGridMonth',
              headerToolbar: {
                    left: "prev title next",
                    right: 'today, dayGridMonth, listWeek'
               },
              events: data // json 데이터 받아오는 부분
            });

            calendar.render();								
    });

    request.fail(function( jqXHR, textStatus ) {
      alert( "Request failed: " + textStatus );
    });
});

 

3. DB 테이블 작성

1. DB 테이블 생성 및 데이터 삽입

CREATE TABLE `calendar` (
  `calNo` int NOT NULL AUTO_INCREMENT,
  `calTitle` varchar(30) DEFAULT NULL,
  `calDetail` varchar(50) DEFAULT NULL,
  `calStart` datetime DEFAULT NULL,
  `calEnd` datetime DEFAULT NULL,
  `calURL` varchar(100) DEFAULT NULL,
  PRIMARY KEY (`calNo`)
)

INSERT INTO `calendar` 
VALUES  (1,'지킬 앤 하이드 12차',NULL,'2022-03-10 14:00:00',NULL,'www.ticket.interpark.com'),
        (2,'데스노트','2차 티켓팅','2022-03-10 14:00:00',NULL,'http://ticket.interpark.com'),
        (3,'웨스턴 스토리','Detail','2022-03-02 13:00:00',NULL,'https://tickets.interpark.com/goods/22000934'),
        (4,'노트르담 드 파리','프렌치 오리지널 내한','2022-03-02 16:00:00',NULL,'https://tickets.interpark.com/goods/22000002'),
        (5,'지킬앤하이드',NULL,'2022-03-15 13:00:00',NULL,'http://ticket.interpark.com'),
        (6,'엑스칼리버',NULL,'2022-03-27 13:00:00',NULL,'http://ticket.interpark.com'),
        (7,'프리다',NULL,'2022-03-17 14:00:00',NULL,'http://ticket.interpark.com'),
        (8,'킹아더',NULL,NULL,NULL,'http://ticket.interpark.com');

 

4. DB 연동 작업

1. VO 작성(DTO)

2. DAO 작성

package com.project.board.dao;

import java.util.List;
import java.util.Map;

public interface ICalendarDAO {
    public List<Map<String, Object>> calenList();
}

3. Service 작성

package com.project.board.service;

import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.stereotype.Service;

import com.project.board.dao.ICalendarDAO;

@Service
public class CalendarService implements ICalendarService{
    @Autowired
    @Qualifier("ICalendarDAO")
    ICalendarDAO dao;


    @Override
    public List<Map<String, Object>> calenList() {
        return dao.calenList();
    }
}

4.Controller 작성

- calenList()메소드 호출해서 데이터를 배열로 넘겨받아서 변수에 저장한다.

- JSONArray와 JSONObject 객체를 생성

- 배열에 담긴 값의 인덱스에 접근하여 hashMap의 키와 값에 넣기

@Controller
public class CalendarController{
	
    @Autowired
    CalendarService calendarService;
    
    private static final Logger log = LoggerFactory.getLogger(CalendarController.class);
    
    @RequestMapping(value = "/ticketPlan", method = RequestMethod.GET)
    @ResponseBody
    public List<Map<String, Object>> ticketPlan() throws Exception{
        List<Map<String, Object>> list = calendarService.calenList();

        JSONObject jsonObj = new JSONObject(); // 중괄호 events: { title : '제목', start : '2022-03-03', end : '2022-03-03'}
        JSONArray jsonArr = new JSONArray(); // 대괄호 events: [{ title : '제목', start : '2022-03-03', end : '2022-03-03'},{ title : '제목', start : '2022-03-03', end : '2022-03-03'}]
        HashMap<String, Object> hash = new HashMap<String, Object>(); // 중괄호로 감싸서 대괄호 이름 정의

		// db에 있는 데이터 불러와서 jsonArr 배열에 저장
        for(int i=0; i < list.size(); i++) {
            hash.put("title", list.get(i).get("calTitle"));
            hash.put("content", list.get(i).get("calDetail"));
            hash.put("start", list.get(i).get("calStart"));
            hash.put("url", list.get(i).get("calURL"));

            jsonObj = new JSONObject(hash);
            jsonArr.add(jsonObj);
        }

        log.info("jsonArrCheck: {}", jsonArr);

        return jsonArr;
    }
}

5. json 라이브러리 추가(pom.xml)

<!-- JSON -->
<dependency>
   <groupId>com.googlecode.json-simple</groupId>
   <artifactId>json-simple</artifactId>
   <version>1.1.1</version>
</dependency>

6. mapper 작성

<select id="calenList" resultType="Map" parameterType="string">
    SELECT * FROM calendar
</select>

 

5. 결과

DB에 저장한 값들이 출력되어 보이는 것을 확인할 수 있다.

 

6. 최종 코드

https://github.com/hyeonji0409/mutroduce