[js] FullCalendar.js 표시 갯수 제한 ( 더보기 기능 )

, eventLimit: true             // 더 보기 기능 활성화
, eventLimitClick: 'popover',  // "더 보기" 클릭 시 팝업을 띄워서 나머지 이벤트 표시
, views: {
    dayGridMonth: {
        eventLimit: 4  // 더보기 포함해서라 4로 설정
    }
}
, eventPositioned: (info) => {
    if (info.view.viewSpec.type == 'dayGridMonth') {

        const moreLink = $(".fc-more-cell").find(".fc-more");

        if (moreLink.length) {
            moreLink.each(function() {
                // 텍스트 변경
                const match = $(this).text().match(/\+(\d+)/);

                if (match) {
                    $(this).text(`${match[0]} 더보기`);
                }
            });
        }
    }
}

 

 

- eventLimitClick: "더 보기" 클릭 시 동작을 설정합니다. 예를 들어, eventLimitClick: 'popover' 또는 'list'로 설정할 수 있습니다.

    ➡️ 'popover' (기본값): 클릭 시 팝업, 'list': 일일 목록 뷰로 전환, 함수 지정도 가능

 

-eventPositioned : eventPositioned는 FullCalendar에서 이벤트가 DOM에 위치된 후 호출되는 콜백입니다.
지금 작성된 코드는 월간(dayGridMonth) 뷰에서 "+N 더보기" 텍스트를 한글로 바꾸는 역할을 합니다.

 

✅ 예시 전후

원래 텍스트	바뀐 텍스트
+3 more	+3 더보기
+5 more	+5 더보기