지난번에 문화행사 데이터를 저장하고, ics파일로 만들기까지 진행되었다. 이제 이 데이터로 javascript에 풀캘린더(full calendar)를 활용해 달력을 출력할 시간이다.
풀캘린더 공식 사이트
Introduction - Docs | FullCalendar
Introduction - Docs | FullCalendar
How to get FullCalendar’s code, initialize a calendar, and other basic principles.
fullcalendar.io
풀캘린더 Full Calendar 사용하기
1) 세팅
풀캘린더를 사용하면 내가 직접달력을 구현할 필요가 없이, 미리 구현된 달력에 내 데이터를 입력하기만 하면 된다. 풀캘린더 공식 홈페이지에서 세팅할 수 있는 방법을 여럿 소개하고 있는데, 나는 직접 javascript, css파일을 다운받아서 JSP페이지에서 링크를 적는 방식으로 세팅하였다. 그 상태에서 풀캘린더 공식 문서에 적혀 있는 코드를 그대로 복사하면 기본 달력이 출력되는 상태가 마련된다.
2) 일정 데이터 입력하기
세팅을 한 뒤, 내가 준비한 데이터를 달력에 넣어야 한다. 나는 ajax로 json데이터를 호출하여 controller에서 데이터를 넘겨받는 방식으로 코드를 구성하였다.
3) 기타 세팅
아무 변경이 없는 기본 풀캘린터 프론트 코드를 사용하면, 바꿔야 하는 부분이 여럿 존재한다. 영어->한국어로 언어를 바꿔줘야 하고, 하루에 표시되는 일정이 굉장히 많아도 전부 표시되는 것이 아니라 (+더보기)형태로 감춰져야 한다. 또한 부트스트랩 테마와 같은 디자인 테마도 적용이 가능하다. 나는 언어변경, 하루에 표시되는 일정 제한, 그리고 부트스트랩 테마 적용을 추가하였다.
프론트 코드
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<script type='text/javascript' src='http://code.jquery.com/jquery-3.3.1.js'></script>
<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css' rel='stylesheet'>
<link href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css' rel='stylesheet'>
<link href='${path}/resources/lib/main.css' rel='stylesheet' />
<script type="text/javascript" src='${path}/resources/lib/main.js'></script>
<script type="text/javascript" src='${path}/resources/lib/locales-all.js'></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/icalendar@5.11.5/main.global.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
$(function(){
var request = $.ajax({
url : '${path}/calendarjson',
method : 'GET',
dataType : 'json'
});
request.done(function (data){
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
events : data,
dayMaxEvents : true,
locale : 'ko',
themeSystem: 'bootstrap5',
headerToolbar : {
start: 'today,prev,next',
center: 'title',
end: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
}
});
calendar.render();
});
});
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-size: 14px;
}
#calendar {
max-width: 1100px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
Controller 코드 - json데이터 생성
@SuppressWarnings("unchecked")
@ResponseBody
@RequestMapping(value="/calendarjson", produces = "application/json; charset=utf-8")
public JSONArray CalendarJson(){
List<EventCalendar> eList = new ArrayList<EventCalendar>();
eList = service.findAll();
JSONObject jsonObj = new JSONObject();
JSONArray jsonArr = new JSONArray();
HashMap<String, Object> hash = new HashMap<String, Object>();
for (int i = 0; i < eList.size(); i++) {
if (eList.get(i).getSDate().length() != 8 || eList.get(i).getEDate().length() != 8) {
continue;
}
hash.put("title", eList.get(i).getSubTitle());
hash.put("start", formatDate(eList.get(i).getSDate()));
hash.put("end", formatDate(eList.get(i).getEDate()));
if (eList.get(i).getSubPath() != null) {
hash.put("url", eList.get(i).getSubPath());
}
jsonObj = new JSONObject(hash);
jsonArr.add(jsonObj);
}
return jsonArr;
}
// 날짜 포맷 변환용 메소드
public String formatDate(String input) {
// 20230101
// 01234567
String result = "";
result += input.substring(0, 4);
result += "-";
result += input.substring(4, 6);
result += "-";
result += input.substring(6);
return result;
}
이제 드디어 프론트 페이지를 확인해 보면, 일정이 출력되고 있다.
'프로젝트' 카테고리의 다른 글
| 주소와 시도, 시군구 코드 input 처리 (0) | 2024.03.15 |
|---|---|
| 문화재청 행사일정 API로 달력 만들기 시리즈 (2) (0) | 2024.02.25 |
| 문화재청 행사일정 API로 달력 만들기 시리즈 (1) (0) | 2024.02.23 |
| 프로젝트의 교훈 (0) | 2024.02.20 |
