KH 파이널 프로젝트 때 일정관리를 맡게 되어 사용하게 된 풀캘린더!!
시행착오도 매우매우 많았고,
솔직히 아직 모르는게 더 많은 것 같지만 ㅎㅎㅎ
티스토리에 기록해 놓으려 한다.
1. 개발환경
- SpringFramework(STS3), jdk8, oracle11
- HTML, CSS(Bootstrap4), JavaScript, jQuery
- FullCalendar5.8.0
FullCalendar - JavaScript Event Calendar
Open Source... With over 10 years of open source and over 120 contributors, FullCalendar will always have a free and open source core. Learn more
fullcalendar.io
2. FullCalendar 기본 설정 설명
정말 간단하게 기능들 설명!!
1. FullCalendar 시작하기 (참고:https://fullcalendar.io/docs/initialize-globals)
풀캘린더 홈페이지에서 파일 다운로드 후 원하는 경로에 넣고 태그 넣기
나는 resources 파일에 넣었다.
2. FullCalendar 한국어 설정
아래 코드처럼 <script> 구문을 추가 후,
캘린더 설정 구문 안에
locale: 'ko' 넣기
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 풀캘린더 -->
<link href='${pageContext.request.contextPath}/resources/fullcalendar-5.8.0/lib/main.css' rel='stylesheet' />
<script src='${pageContext.request.contextPath}/resources/fullcalendar-5.8.0/lib/main.js'></script>
<!-- 한국어설정 -->
<script src='${pageContext.request.contextPath}/resources/fullcalendar-5.8.0/lib/locales/ko.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
locale: 'ko'
}
calendar.render();
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
3. FullCalendar header설정 (참고:https://fullcalendar.io/docs/headerToolbar)
headerToolbar: { // 헤더설정
left: 'prevYear,prev,next,nextYear today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,dayGridDay'
}
4. FullCalendar 클릭이벤트(dateClick, eventClick)
- dateClick : date셀을 클릭하면 발생하는 이벤트 설정
-> 나는 일정을 추가하는 모달창이 뜨도록 함 - eventClick : event를 클릭하면 발생하는 이벤트 설정
-> 나는 일정 상세정보 팝업창이 뜨도록 함 - 함수 호출 시 date나 event 정보가 들어오므로,
console에 출력해보고 필요한 정보를 활용하면 된다.
dateClick: function(date) {
// 날짜셀 클릭했을 시 이벤트 설정하면됨!
// => 일정추가 모달창 뜨게 설정
//console.log(date.dateStr);
$('#startDate').val(date.dateStr);
$('#endDate').val(date.dateStr);
$('#insertSc').modal();
console.log(date);
},
eventClick: function(info) {
// 이벤트 클릭했을 시 기능 설정
// 일정 내용과 보고서가 보여져야 함!!
var scNo = info.event._def.extendedProps.scNo;
var option = "width = 700, height = 700, top = 100, left = 200, location = no";
window.open("detail.sc?scNo=" + scNo, "일정상세정보", option);
}
5. FullCalendar DB에서 이벤트 불러오는 방법(feat.이벤트타입별로 색상 부여)
ajax를 사용했다.
나는 스케줄 타입별(개인, 부서, 회사)로 다른 색을 주고 싶었기 때문에
DB에 저장된 이벤트들을 각각 따로 불러와서 eventSources 안에 event들을 담았다.
even를 반복문으로 담을 때 eventColor도 지정해서 담았더니 내가 원하는 대로 출력이 잘 되었다!!
eventSources:[
{
events: [ // ajax로 일정 불러오기
// 1. 개인 일정
$.ajax({
url :'list.sc',
data : {scType:"개인", memNo:${loginUser.memNo}},
cache: false,
success:function(list){
var scList = Object.values(JSON.parse(list));
for(var i=0; i<scList.length; i++){
scList[i].color = '#148CFF';
if(scTypeString.includes('개인')){
calendar.addEvent(scList[i]); // DB에 있는 이벤트 캘린더에 추가
}
}
},error: function(){
console.log("일정 조회용 ajax 통신 실패");
}
})
],
events: [
// 2. 회사 일정
$.ajax({
url :'list.sc',
data : {scType: "회사", memNo:${loginUser.memNo}},
cache: false,
success:function(list){
var scList = Object.values(JSON.parse(list));
for(var i=0; i<scList.length; i++){
scList[i].color = '#378006';
if(scTypeString.includes('회사')){
calendar.addEvent(scList[i]); // DB에 있는 이벤트 캘린더에 추가
}
}
},error: function(){
console.log("일정 조회용 ajax 통신 실패");
}
})
],
events: [
// 3. 부서 일정
$.ajax({
url :'list.sc',
data : {scType: "부서", memNo:${loginUser.memNo}},
cache: false,
success:function(list){
var scList = Object.values(JSON.parse(list));
for(var i=0; i<scList.length; i++){
scList[i].color = '#7B68EE';
if(scTypeString.includes('부서')){
calendar.addEvent(scList[i]); // DB에 있는 이벤트 캘린더에 추가
}
}
},error: function(){
console.log("일정 조회용 ajax 통신 실패");
}
})
],
}]
3. 전체 코드와 완성 view
전체 코드▼
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 풀캘린더 -->
<link href='${pageContext.request.contextPath}/resources/fullcalendar-5.8.0/lib/main.css' rel='stylesheet' />
<script src='${pageContext.request.contextPath}/resources/fullcalendar-5.8.0/lib/main.js'></script>
<!-- 한국어설정 -->
<script src='${pageContext.request.contextPath}/resources/fullcalendar-5.8.0/lib/locales/ko.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
dateClick: function(date) {
// 날짜셀 클릭했을 시 이벤트 설정하면됨!
// => 일정추가 모달창 뜨게 설정
//console.log(date.dateStr);
$('#startDate').val(date.dateStr);
$('#endDate').val(date.dateStr);
$('#insertSc').modal();
console.log(date);
},
eventClick: function(info) {
// 이벤트 클릭했을 시 기능 설정
// 일정 내용과 보고서가 보여져야 함!!
var scNo = info.event._def.extendedProps.scNo;
var option = "width = 700, height = 700, top = 100, left = 200, location = no";
window.open("detail.sc?scNo=" + scNo, "일정상세정보", option);
},
headerToolbar: { // 헤더설정
left: 'prevYear,prev,next,nextYear today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,dayGridDay'
},
handleWindowResize: true,
navLinks: true, // can click day/week names to navigate views
//editable: true, // 편집가능
dayMaxEvents: true, // allow "more" link when too many events
locale: 'ko', // 한국어 설정
themeSystem: 'bootstrap', // 테마 설정
eventSources:[
{
events: [ // ajax로 일정 불러오기
// 1. 개인 일정
$.ajax({
url :'list.sc',
data : {scType:"개인", memNo:${loginUser.memNo}},
cache: false,
success:function(list){
var scList = Object.values(JSON.parse(list));
for(var i=0; i<scList.length; i++){
scList[i].color = '#148CFF';
if(scTypeString.includes('개인')){
calendar.addEvent(scList[i]); // DB에 있는 이벤트 캘린더에 추가
}
}
},error: function(){
console.log("일정 조회용 ajax 통신 실패");
}
})
],
events: [
// 2. 회사 일정
$.ajax({
url :'list.sc',
data : {scType: "회사", memNo:${loginUser.memNo}},
cache: false,
success:function(list){
var scList = Object.values(JSON.parse(list));
for(var i=0; i<scList.length; i++){
scList[i].color = '#378006';
if(scTypeString.includes('회사')){
calendar.addEvent(scList[i]); // DB에 있는 이벤트 캘린더에 추가
}
}
},error: function(){
console.log("일정 조회용 ajax 통신 실패");
}
})
],
events: [
// 3. 부서 일정
$.ajax({
url :'list.sc',
data : {scType: "부서", memNo:${loginUser.memNo}},
cache: false,
success:function(list){
var scList = Object.values(JSON.parse(list));
for(var i=0; i<scList.length; i++){
scList[i].color = '#7B68EE';
if(scTypeString.includes('부서')){
calendar.addEvent(scList[i]); // DB에 있는 이벤트 캘린더에 추가
}
}
},error: function(){
console.log("일정 조회용 ajax 통신 실패");
}
})
],
}]
});
function resize(){
calendar.updateSize();
}
calendar.render();
});
</script>
<style>
#calendar{
width: 100%;
padding: 20px;
}
.fc-event{
cursor: pointer;
}
.fc-event:hover{
opacity: 0.7;
}
</style>
</head>
<body>
<div id="calendar"></div>
<!-- 일정추가 모달창 -->
<jsp:include page="scheduleInsertView.jsp"/>
</body>
</html>
4. 느낀 점
시간에 쫓겨 세심한 부분을 신경쓰지 못해서 아쉬운 부분이 많다.
일정을 마우스 드래그로 옮겨 날짜를 변경하는 기능과
사용자가 원하는 색으로 일정 색깔을 변경하는 기능 등등 넣고 싶은게 많았는데 시간이 너무 부족했고 API 첫 사용이라 처음에 너무 헤맸다 ..!
그리고 뭔가 비효율적으로 코딩한 느낌 ,,?!
정말 맨땅에 헤딩 느낌이다 ㅠㅎㅎ
그래도 일반 게시판 CRUD 보다는 훨씬 재밌었다 !!!
다음엔 더 잘할 수 있을 것 같다 😊