[fullcalendar-datesSet] 출력 일자 범위 확인 및 next, prev 버튼 제어

배경설명

• fullcalendar 라이브러리를 활용한 달력 UI 내 출력 일자 범위 확인 및 조회가능월 범위 설정 필요

해결방법

• datesSet : 달력 UI가 렌더링될 때마다 호출되는 callback function
  • 초기 렌더링 시
  • next, prev 버튼 클릭 후 렌더링 시

datesSet 선언

let calendar;
document.addEventListener('DOMContentLoaded', function() {
   const calendarEl = document.getElementById('calendar');
   calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth', // (기본 설정: 달)
    titleFormat: {
        year: 'numeric',
		month: '2-digit',
	},
     datesSet: (info) => {...},
   });
   calendar.render();
});

출력 일자 범위 console 출력

console.log('Current date range:', info.startStr, 'to', info.endStr); // Current date range: 2023-04-03T00:00:00+09:00 to 2023-05-13T00:00:00+09:00

console.log('startStr : ', info.startStr.substring(0, 10).replace(/\-/g, '')); // 20230403

console.log('endStr : ', info.endStr.substring(0, 10).replace(/\-/g, '')); // 20230513

• 달력 UI에 출력된 최소/최대일자 확인 가능 😊

next, prev 버튼 제어

• 버튼 class
  • 다음 next : fc-next-button
  • 이전 prev : fc-prev-button

const title = calendar.view.title;
const maxShowMth = 5; // 최대출력월

console.log(`title : ${title}`); // 04/2023
console.log(`getMthStr(title) : ${getMthStr(title)}`); // 4

if (getMthStr(title) === maxShowMth) {
	const nextBtn = document.getElementsByClassName("fc-next-button")[0];
  	nextBtn.disabled = true; // disabled
    nextBtn.style.display = 'none'; // hide
}

• 달력 UI 최대출력월 5월 진입 시
• next 버튼 disabled
  
• next 버튼 hide -> title 이 hide된 버튼 쪽으로 쏠리는 현상 있음
  

결론

• fullcalendar datesSet 함수를 활용 시
  • 출력월에 대한 정보를 알 수 있음 👀
  • next와 prev 버튼 제어 가능 👍

참고

• github fullcalendar datesSet PoC