[FullCalendar] 풀캘린더(FullCalendar) 만들기 / 기본 풀캘린더 사용방법

Junesker 2024. 6. 14. 12:37

풀캘린더(FullCalendar) JS를 이용하여 캘린더 만들기

자바스크립트 기반의 오픈소스 FullCalendar는 다양한 시작을 제공합니다. ScriptTag, ES6 Build, TypeScript, React Connector(Next 지원), Vue Connector(Next 지원), Angular Connector 등 다양한 시작을 지원하지만 본 작성자가 소개할 방법은 스크립트 태그로 시작하는 방법을 제공하고자 합니다.

개발 환경

IDE Tool	STS 3.9.15(Eclipse 4.16)
SpringFramework	5.3.25
JDK	1.8
Apache-Tomcat	8.5
FullCalendar JS	fullcalendar-6.1.14
ORM	Mybatis
Database	Oracle Database 11g XE

FullCalendar JS를 활용하는 방법에 위 개발 설정처럼 STS 3.9.15, SpringFramework는 5.3.25, JDK 1.8, 서버는 Apache-Tomcat 8.5를 활용해 풀캘린더를 만들어보려고 한다. 기본적으로 FullCalendar JS를 활용해 풀캘린더를 띄우는데에는 위 개발 환경처럼 모두 필요한 스팩은 아니다. 기본적인 Dynamic Web Project 만으로도 충분히 띄울 수 있다. 하지만, 추후에 일정관리 기능을 만들기 위해서는 데이터베이스도 연동해야하고 프레임워크를 이용한 빠른 개발을 하기 위해서 다른 개발 스펙도 추가하였다.

스크립트 태그로 초기화

HTML 페이지의 <head></head> 태그 내 필요한 태그를 수동으로 포함시킨 후 브라우저 전역을 통해 달력을 초기화할 수 있다. FullCalendar의 사전 구축된 번들 중 하나를 활용(전체 CDN)하거나 개별 플러그인을 활용하여 FullCalendar를 초기화할 수 있다.

1. FullCalendar JS를 사용할 수 있도록 CDN 또는 FullCalendar JS 특정 버전의 알집 파일을 다운로드 받아서 JS파일을 등록합니다.

[FullCalendar JS CDN을 이용하는 방법]

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

[FullCalendar JS 알집 파일을 이용한 방법]

<script src="/resources/js/index.global.min.js"></script>

FullCalendar 번들파일인 'index.global.js' or 'index.global.min.js' 에는 다음과 같은 패키지가 포함되어 있다.

@fullcalendar/core
@fullcalendar/interaction (날짜 선택, 이벤트 드래그 및 크기 조정)
@fullcalendar/daygrid (월 및 dayGrid 보기의 경우)
@fullcalendar/timegrid (timeGrid 뷰의 경우)
@fullcalendar/list (목록 보기의 경우)
@fullcalendar/multimonth (다개월 보기의 경우)

FullCalendar JS에서 기본적으로 제공하는 번들에 경우, 위 6가지의 기능을 포함하고 있다면, 더 많은 기능을 포함하고 있는 번들은 프리미엄 번들이 있다. 프리미엄 번들은 기본 번들 포함 총 13개의 기능을 포함하고 있다. 아무래도 기본 번들보다는 더 많은 기능을 포함하고 있어 더 다양한 기능을 만들 수 있다.

2. body태그 안에 calendar를 출력할 div를 만들어줍니다.

<body>
	<div id='calendar'></div>
</body>

3. script태그 안에 calendar를 띄울 스크립트 구문을 넣는다.

<script>
document.addEventListener('DOMContentLoaded', function() {
	var calendarEl = document.getElementById('calendar');
	var calendar = new FullCalendar.Calendar(calendarEl, {
		initialView: 'dayGridMonth'
	});
	calendar.render();
});
</script>

4. id가 calendar인 div영역 안에 FullCalendar가 만들어져 있는 모습을 확인할 수 있다.

[FullCalendar JS 적용 Source]

<%@ 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>
<!-- FullCalendar JS 알집 파일을 이용한 방법 -->
<!-- <script type="text/javascript" src="/resources/js/index.global.min.js"></script> -->
<!-- FullCalendar JS CDN을 이용한 방법 -->
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.14/index.global.min.js"></script>
</head>
<body>
	<div id="calendar"></div>
</body>
<script>
	document.addEventListener('DOMContentLoaded', function() {
		var calendarEl = document.getElementById('calendar');
		var calendar = new FullCalendar.Calendar(calendarEl, {
			initialView : 'dayGridMonth'
		});
		calendar.render();
	});
</script>
</html>

[FullCalendar JS 적용 View]

기본적으로 FullCalendar JS는 CDN, 버전별 압축파일, 등을 제공하여 캘린더를 만들수 있도록 제공한다. 이때 사용하게 될 번들 파일인 '/fullcalendar/index.global.js'는 기본 번들이 있고 프리미엄 버전 그리고 개별 플러그인으로 존재한다. 기본적으로는 기본 번들에 해당하는 'index.global.js'를 이용하면 되고 더 다양한 기능을 제공 받길 원한다면 프리미엄 번들에 해당하는데 ' /fullcalendar-scheduler/index.global.js'를 이용하면 된다.

FullCalendar JS를 소개하는 내용은, FullCalendar 공식 홈페이지에 내용을 적극 참고하여 작성된 글임을 명시합니다. 모든 내용은 공식 홈페이지 메인 내용 및 Documents 를 기반으로 작성하였습니다.

@Junesker

저작자표시 (새창열림)