배경설명
- 프로젝트 내 달력 UI 레퍼런스 없음
PoC
- 웹앱 내 달력 UI 화면 출력
- 일정 이벤트 영역 표시 (일 : 하루 or 기간 : 이틀 이상)
- 일정 클릭 이벤트 커스텀
솔루션
fullcalendar 도입
- javascript 기반 open source library
- 달력, 일정, 스케쥴러 기능 구현 시 가장 많이 사용하는 library
- 실제로 calendar 구글링 시 압도적으로 많이 검색됨
- FullCalendar 공식 홈페이지 - library 다운로드 및 샘플 소스 링크
- 최신 버전 : 6.0.3 (23.01.24 기준)
샘플 소스
- 사내망 반입을 위한 js import 방식 채택
<script src='fullcalendar-6.0.3/dist/index.global.js'></script>- <head><script> ... </script></head>
let calendar;
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth', // 초기 로드 될때 보이는 캘린더 화면 (기본 설정: 달)
locale: 'ko', // 한국어 설정
expandRows: true, // 화면에 맞게 높이 재설정
height: '500px', // calendar 높이 설정
events: [
{
idx: 0, // extendedProps.idx 접근 가능
title: '첫번째 일정',
start: '2023-01-25',
classNames: [ 'classAddtest' ], // event 영역 class 추가
backgroundColor: 'red',
borderColor: 'red',
textColor: 'black',
},
{
title: '두번째 일정',
start: '2023-01-25',
end: '2023-01-28',
},
{
title: '페이지 이동 이벤트 호출',
url: 'https://naver.com',
start: '2023-02-01',
},
], // 이벤트
eventClick: function(info) {
alert('Event info : ' + JSON.stringify(info.event));
// url 커스텀 이동
info.jsEvent.preventDefault(); // 클릭이벤트 후처리 방지
if (info.event.url) {
window.open("https://fullcalendar.io/docs/eventClick");
}
}, // 일정 이벤트 클릭 이벤트 callback
});
calendar.render();
});- <body> ... </body>
<div id='calendar-container'>
<div id='calendar'></div>
</div>출력 화면 캡처
- PC, Chrome browser
- iPhone SE
- Galaxy S20 Ultra
- 일정 클릭 이벤트 callback json 데이터
- 화면 이동 등 custom 개발 가능 확인
- 화면 이동 등 custom 개발 가능 확인
결론
- fullcalendar PoC 기능 확인 완료
- 일정 추가, 관리, Drag & Drop 기능 활용 등 다양한 기능은 PoC 와 별개로 테스트해보기
- TODO check list
- 프로젝트 웹앱 내 웹뷰에서 다양한 모바일 기종으로 확인 필요!
- Galaxy S8+, Fold 는 텍스트 밀림 현상 확인
- Galaxy S8+, Fold 는 텍스트 밀림 현상 확인
- 프로젝트 웹앱 내 웹뷰에서 다양한 모바일 기종으로 확인 필요!
참고
- fullcalendar
자기 개발 기록 저장소