Fullcalendar 사용하기(1) - 출력하기 / 한국어 설정

사용 언어 및 개발 환경

Language : Java 8, Servlet/JSP, HTML5, CSS3, JavaScript, XML
Web Application Server: Apache Tomcat 8.5
Database : Oracle 11g Express Edition
Framework & Open Api : Spring, MyBatis, Ajax, jQuery
IDE : STS 3.9.12 / sqldeveloper

fullcalendar 사이트 참고

📅 Fullcalendar 화면에 출력하기

1. calendar jsp 파일 생성

2. fullcalendar cnd 적용

//fullcalendar css
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.css">

<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
//fullcalendar 언어 설정관련 script
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/locales-all.js"></script>

3. fullcalendar 위치 지정

id가 'calendar'로 지정.
div 태그가 위치한 곳에 fullcalendar 출력되어 나타남

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

4. fullcalendar 출력하기

출력하기 위한 기본 스크립트를 추가
div 캘린더 보다 뒤에 추가한다.

document.addEventListener('DOMContentLoaded', function() {
	var calendarEl = document.getElementById('calendar');
	var calendar = new FullCalendar.Calendar(calendarEl, {
		initialView : 'dayGridMonth', // 초기 로드 될때 보이는 캘린더 화면(기본 설정: 달)
		headerToolbar : { // 헤더에 표시할 툴 바
			start : 'prev next today',
			center : 'title',
			end : 'dayGridMonth,dayGridWeek,dayGridDay'
		},
		titleFormat : function(date) {
			return date.date.year + '년 ' + (parseInt(date.date.month) + 1) + '월';
		},
		//initialDate: '2021-07-15', // 초기 날짜 설정 (설정하지 않으면 오늘 날짜가 보인다.)
		selectable : true, // 달력 일자 드래그 설정가능
		droppable : true,
		editable : true,
		nowIndicator: true, // 현재 시간 마크
		locale: 'ko' // 한국어 설정
	});
	calendar.render();
});

✨ 출력화면!