스프링부트(SpringBoot)로 풀캘린더(FullCalendar) 구현하기

스프링부트(SpringBoot)로 풀캘린더(FullCalendar) 구현하기 - 1

Junesker 2025. 5. 12. 15:25

풀캘린더 기본적인 여러 속성에 대해서 이전 게시글을 통해 알아봤다면, 스프링 부트를 활용해 풀캘린더를 구현해보도록 하겠습니다. 풀캘린더는 일정 관리 기능을 구현할 때 많이 사용하는 라이브러리로, 많은 기업들이 풀캘린더 라이브러리를 가져다 일정 관리 기능으로 활용하고 있는 만큼 직접 구현하고 사용해보는데 의미가 있습니다.

풀캘린더 설정하기

캘린더 화면 만들기

캘린더 화면을 만들기 위해서는 JSP페이지를 이용해 캘린더가 보여질 페이지를 관련 스크립트, 스타일을 적용해 만들어야합니다. 그렇기 위해서는 스크립트, 스타일 정보를 CDN 또는 제공 파일을 통해 설정해야 합니다. 캘린더 화면을 구성하기 위해 기본적인 설정이 필요한데 각 설정에 따라 3가지 방식으로 캘린더 화면을 구성해보겠습니다.

풀캘린더 기본 설정을 이용한 방식
커스텀 일정으로 events 속성 이용한 방식
커스텀 일정으로 events 속성에 URL 이용한 방식

COMMON 설정

위 3가지 방식 모두 아래 COMMON 설정은 동일합니다. 다만, 스크립트 내에 작성해야 할 속성 내용들이 다릅니다.

풀캘린더 GLOBAL CDN 설정

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.14/index.global.min.js"></script>

풀캘린더가 나타날 영역 설정

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

1. JSP 페이지 구성하기 (풀캘린더 기본 설정)

전체 소스

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.14/index.global.min.js"></script>
</head>
<body>
	<div id="calendar"></div>
</body>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
	let calendarEl = document.getElementById('calendar');
	
	let headerToolbar = {
		left: 'prevYear,prev,next,nextYear today',
		center: 'title',
		right: 'dayGridMonth,dayGridWeek,timeGridDay'
	}
	
	let calendar = new FullCalendar.Calendar(calendarEl, {
		initialView: 'dayGridMonth',
		headerToolbar: headerToolbar
	});
	calendar.render();
});
</script>
</html>

적용 화면

기본적인 풀캘린더 설정으로 적용한 모습입니다. 헤더 툴바로는 오른쪽에 '월', '주', '일' 단위로 일정을 볼 수 있고 툴바 왼쪽에는 현재 월을 이전, 다음으로 확인할 수 있는 버튼이 보여집니다. 그리고 현재 날짜를 캘린더에 색상으로 표시됩니다.

2. EVENTS 구성하여 풀캘린더에 일정 추가하기 (커스텀 일정 직접 구현)

전체소스

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.14/index.global.min.js"></script>
</head>
<body>
	<div id="calendar"></div>
</body>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
	let calendarEl = document.getElementById('calendar');
	
	let headerToolbar = {
		left: 'prevYear,prev,next,nextYear today',
		center: 'title',
		right: 'dayGridMonth,dayGridWeek,timeGridDay'
	}
	
	let calendar = new FullCalendar.Calendar(calendarEl, {
		initialView: 'dayGridMonth',
		headerToolbar: headerToolbar,
		events : [
			{
				id: "sch01",
				title : "일정01",
				start : "2025-05-12",
				end : "2025-05-13",
				backgroundColor: "red",
				textColor : "white",
				allDay : true
			},
			{
				id: "sch02",
				title : "일정02",
				start : "2025-05-12T09:00:00",
				end : "2025-05-13T09:00:00",
				backgroundColor: "green",
				textColor : "white",
				allDay : false
			}
		]
	});
	calendar.render();
});
</script>
</html>

적용 화면

'events' 속성에 커스텀으로 작성된 일정 2가지를 배열의 형태로 만들어서 설정하였습니다. 첫번째 '일정01' 일정은 allDay의 속성이 'true'로 하루종일에 대한 이벤트를 가지고 있는 일정이고 두번째 '일정02' 일정은 allDay의 속성이 'false'로 하루종일이 아니기 때문에 시작시간과 끝 시간으로 이루어진 일정으로 구성되어 있습니다. 각 일정에 따라서 다른 속성 값을 활용할 수 있습니다.

3. 일정 목록을 요청할 URL로 풀캘린더에 일정 추가하기 (DB 연동)

전체소스

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.14/index.global.min.js"></script>
</head>
<body>
	<div id="calendar"></div>
</body>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
	let calendarEl = document.getElementById('calendar');
	
	let headerToolbar = {
		left: 'prevYear,prev,next,nextYear today',
		center: 'title',
		right: 'dayGridMonth,dayGridWeek,timeGridDay'
	}
	
	let calendar = new FullCalendar.Calendar(calendarEl, {
		initialView: 'dayGridMonth',
		headerToolbar: headerToolbar,
		events: "/scheduleList.do"
	});
	calendar.render();
});
</script>
</html>

적용 화면

세번째 방식인 일정 목록을 가져오기 위한 요청을 서버로부터 받아와 'events' 속성에 배열의 형태로 구성해줍니다. 요청 URL을 통해서 넘겨받은 데이터 자체가 List 타입의 배열 데이터기 때문에 events 속성에 각 일정을 구성할 event를 제공해준다면 일정을 구성하는데 문제가 없습니다. 그리고 세번째 방식이 풀캘린더를 구현하는데있어 가장 보편적으로 많이 사용하는 방식입니다. (물론 events 속성에 작성할 내용은 작업자들 마다 차이가 있을 수 있습니다. 필자는 소개해드린것처럼 URL 기반으로 요청을 처리하였습니다.)

각 방식에 따라서 event(일정)를 구성해보았습니다. 마지막 방식으로 소개해드린 DB연동을 이용한 일정 구성에 대해서는 [ 스프링부트(SpringBoot)로 풀캘린더(FullCalendar) 구현하기 - 2 ] 게시글을 통해서 소개해드리도록 하겠습니다.

스프링부트(SpringBoot)로 풀캘린더(FullCalendar) 구현하기 - 2

'스프링부트(SpringBoot)로 풀캘린더(FullCalendar) 구현하기 - 1' 게시글을 통해서 기본적인 캘린더를 구성하는 방법에 대해서 알아보았습니다. 풀캘린더 구현하기 두 번째 게시글에서는 첫 번째 게시

junesker.tistory.com

@Junesker

저작자표시 (새창열림)