Post
FullCalendar 사용 시 end 날짜 관련
🔍 문제 상황
Vue3 + PrimeVue 프로젝트에서 FullCalendar를 이용해 근태 신청 내역을 캘린더에 표시하는 기능을 구현하던 중, 아래와 같은 이상 현상이 발생했다.
2일 이상 신청한 근태는 마지막 날이 캘린더에 표시되지 않는다. 예: 2025-04-22 ~ 2025-04-24 신청 → 달력에는 2025-04-22 ~ 2025-04-23까지만 보임
하지만 Dialog를 열어보면 2025-04-24까지 정상적으로 저장되어 있어 DB에는 이상이 없는 상태였다.
📁 원인 분석
FullCalendar에서는 end 날짜가 “exclusive” (비포함) 으로 처리되기 때문이다.
즉,
start: ‘2025-04-22’, end: ‘2025-04-24’
는 실제로 22일 ~ 23일까지만 표시된다.
마지막 날짜도 포함되게 하려면, end 날짜를 하루 뒤로 설정해줘야 한다.
🛠 해결 방법
1. 날짜 포맷 변환 함수 추가 (yyyymmdd → yyyy-mm-dd)
function formatDate(str) { return `${str.substring(0, 4)}-${str.substring(4, 6)}-${str.substring(6, 8)}`; }
2. 하루 더하는 유틸 함수
function addOneDay(dateStr) { const date = new Date(dateStr); date.setDate(date.getDate() + 1); return date.toISOString().split(‘T’)[0]; }
3. 이벤트 매핑 시 조건적으로 하루 더하기
const mapToCalendarEvents = (data) => { return data.map((item) => { const start = formatDate(item.sdate); const endRaw = formatDate(item.edate || item.sdate); const end = (item.sdate !== item.edate) ? addOneDay(endRaw) : endRaw;
return { id: item.id, title: `${item.name} : ${item.gntCdName} (${item.statusCdName})`, start, end, extendedProps: item, }; }); };
✅ 최종 결과
| 신청 기간 | 표시 기간 (start ~ end) | 달력 표시 결과 |
|---|---|---|
| 2025-04-28 ~ 2025-04-28 | 2025-04-28 ~ 2025-04-28 | ✅ 하루 정상 표시 |
| 2025-04-22 ~ 2025-04-24 | 2025-04-22 ~ 2025-04-25 (하루 추가) | ✅ 22~24일 정상 표시 |
✍ 마무리
이번 문제는 FullCalendar의 end 날짜가 기본적으로 exclusive 처리된다는 사실을 몰라 발생한 이슈였다.
다행히도, 조건적으로 하루를 더하는 간단한 로직만 추가해도 깔끔하게 해결 가능하다.
댓글