일정 관리 기능을 구현하기 위해 FullCalender라는 라이브러리를 사용했다. 유용하고 앞으로도 많이 사용할 것 같아 간단한 사용법을 정리해보려고 한다.
[Fullcalendar]
Fullcalendar는 자바스크립트 기반 오픈소스 라이브러리로, 웹앱 개발 달력이나 일정, 스케줄러 관련 구현 시 가장 많이 사용하는 라이브러리이기도 하다.
파일 다운로드
먼저 홈페이지에 가서 파일을 다운로드 한 뒤 import 해준다.
코드
스크립트 코드를 작성한다.
바디에 id='calendar'인 div를 작성해 주면 기본 달력이 생성되는 것을 확인할 수 있다.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<link href='/fullcalendar/main.css' rel='stylesheet' />
<script src='/fullcalendar/main.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
});
calendar.render();
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
fullCalender 필드
fullcalender 이벤트 객체가 가지는 필드 예시이다.
위의 기본 코드에 추가를 하면 아래와 같은 코드로 사용할 수 있다.
- title : 캘린더에 표시되는 일정의 이름
- start : 캘린더에 표시되는 일정 시작 일
- end : 캘린더에 표시되는 일정 마지막 일
- allDay : 일정이 하루 전체인지 여부(True, false)
※ 더 많은 필드 참고 : https://fullcalendar.io/docs/event-object
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<link href='/fullcalendar/main.css' rel='stylesheet' />
<script src='/fullcalendar/main.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
contentHeight: 600,//캘린더 크기 설정
editable: true,//수정 여부
events: [
{
title : 'event1',
start : '2010-01-01'
url : 'http://www.naver.com/'
},
{
title : 'event2',
start : '2010-01-05',
end : '2010-01-07'
},
{
title : 'event3',
start : '2010-01-09T12:30:00',
allDay : false // will make the time show
}
]
,eventClick:function(info){
window.location.href(info.event.url);
}
});
calendar.render();
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
fullCalender DB조회 및 표출
DB를 조회해 와서 해당 객체에 넣어주면 캘린더에 조회된 내용을 표출할 수 있다.
[출처] https://doongjun.tistory.com/46
$.ajax({
url: '/home/getUserReservation.do',
type: 'GET',
success: function(res){
var list = res;
console.log(list);
var calendarEl = document.getElementById('calendar');
var events = list.map(function(item) {
return {
title : item.reservationTitle,
start : item.reservationDate + "T" + item.reservationTime
}
});
var calendar = new FullCalendar.Calendar(calendarEl, {
events : events,
eventTimeFormat: { // like '14:30:00'
hour: '2-digit',
minute: '2-digit',
hour12: false
}
});
calendar.render();
},
});코드를 위에서부터 설명하자면,
먼저 컨트롤러에서 list로 값을 넘겨받고 list를 console에 출력해보면(console.log(list)) 아래와 같이 잘 넘어온 것을 확인할 수 있다.
리스트를 map()을 활용해서 재구성해주고 return한다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map
'Java' 카테고리의 다른 글
| [Java] 로그인 인증방식은 어떤것이 좋을까? JWT(Json Web Token)발행 및 확인 vs Session (0) | 2022.07.11 |
|---|---|
| Apache Tomcat 최신 버전 업데이트 방법 (0) | 2022.06.23 |
| [js] 페이지 이동하기, 새 창 띄우기 (0) | 2022.06.03 |
| [JS] .slideToggle() / .slideUp() / .slideDown() (0) | 2022.06.03 |
| [라이브러리] Datepicker (0) | 2022.06.03 |
